Mordred Mordred - 1 year ago 177
AngularJS Question

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 appears that no matter what I set for cellTooltip, the tooltips don't show up so long as I have a cellTemplate. If I remove the cellTemplate, the tootlips show up perfectly.

Here's what I'm doing:

colDefs: [
field: 'site_name',
displayName: 'Site Name',
cellTooltip: function (row, col) {return row.entity.site_name},
filter: { condition: uiGridConstants.filter.CONTAINS },
cellTemplate: siteNameLink,
width: '25%'
},{ ... }

I understand that just doing
cellTooltip: true
wouldn't work because the cellTemplate has HTML in it, but I ought to be able to specify a custom tooltip using the functions on
, but that doesn't work either.

I've even tried a dumb cellTooltip function like:

function (row, col) { return 'test' }

and no tooltip ever appears. Is there something I'm missing or is this just a missing feature in ui-grid for now?

Answer Source

I'm an idiot. This obviously wouldn't work because the cellTemplate replaces whatever the content is, and cellTooltip is just a title attribute.

Solution is to add the title attribute in the cellTemplate itself like so:

var siteNameLink = '<div class="ui-grid-cell-contents" title="{{COL_FIELD}}"><a 
ui-sref="sites.site_card({siteid: row.entity._id})">{{COL_FIELD}}</a></div>';