How to enable cellTooltips when using a cellTemplate?

Question

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 row.entity.site_name, 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?

Zaid

Answer 1

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>';

Zaid

Except if you want to do something a little more complex in your tooltip function, things become a lot more difficult. – Passel