How to use cellTooltip with cellTemplate in angular ui grid

ui-grid example
ui-grid options
ui-grid columndefs
ui-grid grouping
ui-grid-selection
ui-grid expandable
ui-grid filter
ui-grid-pinning

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//
}
        }
      ]

}

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!

117 Tooltips, cellTooltip: function(row, col) { return 'Name: ' + row.entity.name + ' Company: ' + src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>  Render Tooltips for Grid Cells You can show the content of a Grid cell in a tooltip which will be displayed when the user hovers over that cell. Use the Tooltip template to display the content of its anchor elements.

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:{}

};
});

How to enable cellTooltips when using a cellTemplate?, I've got a ui-grid using the latest version (3.0.0-rc22). In my column definitions, I'​ve setup a cellTemplate to allow linking to a different route. Unfortunately it  But, I want to display the data coming from the row and it doesn't work until now. So my question is : What have I to do so that I can pass "row.entity.customer" in the template that will fetch the data coming from my json file. It is a question relating about what is the controller in the grid and about what is the grid scope. Here is the plunker.

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

How to use cellTooltip with cellTemplate in angular ui grid, 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  I need my UI grid to show a customized tool tip. By customized i mean, it should show a custom HTML as a tooltip on hovering any cell Below is my part of code

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 ...;
             }
...
}
]

cellTemplate not working with tooltips? · Issue #6184 · angular-ui/ui , Im stucked when I try to use tooltips on my grid. The thing is that, nothing changes and I cant check where the problem is. The rows are not  Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

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>',
}

UI-Grid with tooltips, var app = angular.module('app', ['ui.grid', 'ui.bootstrap']); app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { $scope.gridOptions  Render Cell Content in a Tooltip. You can show the content of a Grid cell in a tooltip which will be displayed when the user hovers over that cell (see example). Suggested Links. API Reference of the GridComponent

AngularStrap tooltip with ui-grid, DOCTYPE html> <html ng-app="apps"> <head> <meta charset="utf-8" /> <title>​AngularJS href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-​grid.css" 'use strict'; angular.module('apps') .config(function($tooltipProvider) CellTemplate='<div class="ui-grid-cell-contents"><input placeholder="Focus to  I tried to use latest angular js version but ng-grid is not working propelry. I have below problem now while applying multiple templates to cell. I want cell to be editable and tooltip should be applied to cell.until I applied tootip as cellTemplate till then editableCellTemplate was working fine even empty cells with out any data.

How to add a Custom tooltip in angularjs ui grid, grid1Api = gridApi; }, columnDefs: [ { field: 'Name', cellClass: 'cell', minWidth: 170, headerCellClass: 'header', cellTooltip: function (row, col) {  6 Ways to Take Control of Displayed Data in UI Grid Getting your data displayed just right in UI Grid can be a huge pain. You might just want to format some numbers, or you might want to embed something complex like a chart or custom directive.

[EVG-6115] perf bb tools tips are not being rendered, ui-grid templates are not being rendered correctly because the angular interpolation symbols are not the default (i.e. '{{' v ']]') . For example: cellTemplate: 'ui-grid-group-name',. width: 200,. sort: { + var tooltipCall = (​tooltipType === 'cellTooltip'). + ? 'col. + throw new Error("Couldn't fetch/use colDef. angular-ui / ui-grid. Sign up Adding an icon to CellTemplate #3250. Closed redapplewithleaves opened this issue Apr 9, 2015 · 4 comments Closed

Comments
  • field:'htmlfield', cellTemplate:'<div title="{{row.entity.htmlfield}}">{{row.entity.htmlfield}}</div>',
  • Thanks mate ! this solution surely does work, with my solution the built-in filtering of ui-grid was not working correctly but with filter it does, but somehow $sce.trustAsHtml doesnt work for me i had tried this earlier also, in filter i had to use regular expression to convert the html to plain text and then return it.
  • @user2889674 - good to know that you found a working solution. please post it as an answer and accept it so that it is useful for other users.
  • It's not really clear what you are asking here. If you could add more details and a specific question it would help you garner useful answers.