How to use cellTooltip with cellTemplate in angular ui grid - angularjs

Question

i am using angular ui grid, there is one column which is getting html string as input, so to display the column value i am using ng-bind-html in cellTemplate(which works fine to display plain inner text), but cellTooltip doesn't work for tooltip(it doesn't), if i use title="{{row.entity.htmlfield}}" in cellTemplate then it shows html string but i need the plain text, how can i achieve this?
what i am using :
$scope.datagrid={
colDefs=[
{
field:'htmlfield',
cellTemplate:'<div title="{{row.entity.htmlfield}}" ng-bind-html="{{row.entity.htmlfield}}"></div>',//html field is expecting html content
cellTooltip:function(row,col){
return row.entity.htmlfield //it doesn't work with cellTemplate//
}
}
]
}

Answer 1

Solution 1:
Remove cellTooltip when you use cellTemplate
You can use a filter like
app.filter('trusted', function ($sce) {
return function (value) {
return $sce.trustAsHtml(value);
}
});
And inside cellTemplate use -
title="{{row.entity.htmlfield | trusted}}"
Solution 2:
You can create a filter on above lines and use it in cellFilter
Tooltips respect the cellFilter, so if you define a cellFilter it will also be used in the tooltip.
Hope this helps!

Answer 2

We can use cellTemplate and cellTooltip like below, for example,
$scope.gridOptions = {
columnDefs: [
{ name: 'name', cellTemplate:"<div class='ui-grid-cell-contents' title='{{grid.appScope.customTooltip(row,col,COL_FIELD)}}'>{{COL_FIELD CUSTOM_FILTERS}}</div>"
}
]
$scope.customTooltip = function (row,col,value) {
console.log(row);
console.log(col);
return value;
}
I have created function for cellTooltip and passed it into title tag, and its working fine. https://plnkr.co/edit/Dcpwy5opZ9BwC8YdWf3H?p=preview

Answer 3

So simple
just remove cellTooltip and add title tag in the cellTemplate div.
{
field:'htmlfield',
cellTemplate:'<div title="{{row.entity.htmlfield}}">{{row.entity.htmlfield}}</div>',
}

Answer 4

I achieved the goal using a custom directive the code for the directive is like
$scope.datagrid={
colDefs=[
{
field:'htmlfield',
cellTemplate:'<tool-tip text="{{row.entity.htmlfield}}"></tool-tip>',//html field is expecting html content, no need to use cellTooltip as it doesn't work//
}
]
}
//create a custom directive to give required feel to your field template//
angular.module('app').directive('tooTip',function(){
var linkFunction=function(scope,element,attributes){
scope.text=String(attributes['text']).replace('/<[^>]+>/gm', '');
};
return{
restrict:'E',
template:'<div title="{{text}}">{{text}}</div>',
link:linkFunction,
scope:{}
};
});

Answer 5

Need to change like this
cellTemplate:'<div title="{{row.entity.htmlfield}}">{{row.entity.htmlfield}}</div>'

Answer 6

Original cellTemplate from ui-grid source:
"<div class=\"ui-grid-cell-contents\" title=\"TOOLTIP\">{{COL_FIELD CUSTOM_FILTERS}}</div>"
In this template TOOLTIP and COL_FIELD and CUSTOM_FILTERS are ui-grid macro-s.
I define cellTemplate (only icon), and use cellTooltip (with fields error messages), and to work freely:
columnDefs: [
{
...
cellTemplate: '<span class="glyphicon glyphicon-alert" title="TOOLTIP"></span>',
cellTooltip: function( row, col ) {
return ...;
}
...
}
]