Tooltip in Angular Kendo UI Grid headers and cells

[Rahul]

I am using Kendo UI Grid with AngularJS. Some of my columns are narrow and the column headers don't display fully (they end in ... next to the filter icon). I want to display tooltip when I hover over them. I also want to display tooltip for every cell in the grid when I hover over them. I looked at some examples from this forum but they were showing tooltip only for a specific column. How can I display tooltips for all headers and cells?

 

Development details:

Kendo UI version: 2016.1.226

OS: Windows 8.1

Browser: Chrome 49, Firefox 45, IE 11

 

Editing the standard AngularJS grid sample will be helpful to us. If this has already been answered, kindly redirect me to the answers.

Thank you for your time.

[Rahul]

Does anyone know how to do this?

 

Thanks.

[Dimiter Topalov]

Hello Rahul,

You can achieve the desired behavior by applying the Kendo UI Tooltip initialization function to the element, containing the Grid. Then use the filter and content options of the Tooltip to customize which cells will show a tooltip on hover, and the corresponding content. Check out the following dojo for a sample implementation:

http://dojo.telerik.com/ocUtU/2

Please note that depending on other Grid settings (e.g. filterable, sortable), additional custom logic for getting the text of the <th> only (excluding its child elements' text) might be needed. You can find a possible solution in the following article:

http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/

I hope this helps.

Regards,
Dimiter Topalov
Telerik

[Rahul]

Hi Dimiter,

 

That looks good. However we are looking for the tooptip in AngularJS version of the grid.

Below is a dojo link of the AngularJS Grid sample. If you can show us how to do it here, we will really appreciate it.

http://dojo.telerik.com/ajegO

 

Thanks,

Rahul

[Dimiter Topalov]

Hello Rahul,

You need to wrap the Grid in a <kendo-tooltip options="tooltipOptions"> and attach the corresponding options to the scope. Please check this dojo for a sample implementation:

http://dojo.telerik.com/ajegO/3

I hope this helps.

Regards,
Dimiter Topalov
Telerik

[Rahul]

Hi Dimiter,

 

Thanks for the sample. I really appreciate you showing me how to do it in AngularJS. I was able to integrate into our code.

However, I found 2 issues:

1. We have column menu turned on and when hovering over the column headers, the tooltip displays text like "Column SettingsFirstName", "ColumnSettingsLastName" etc. How can we fix this?
2. For grid cells which are empty, the tooltip is shown with no content. I'm doing a hack to hide the tooltip in Tooltip's show event if the text is empty. But tooltip is shown momentarily and then goes away. How can we avoid showing tooltip for empty cells?

I have updated the dojo sample to exhibit the above behavior.

http://dojo.telerik.com/ajegO/4

 

Thanks,

Rahul

[Dimiter Topalov]

Hello Rahul,

You can achieve the desired behavior by applying the following adjustments:

1) The cell's text is wrapped in a child <span> element; filter out the empty spans to prevent the Tooltip from showing when hovering empty cells.

2) Check whether the hovered cell is a <th>, and, if so, return the content of its child that is actually containing the text that you want to show in the Tooltip (in the discussed case - an <a> element with class 'k-link').

For example:

$scope.tooltipOptions = {
 filter: "td > span:not(:empty), th", //this filter selects all th and the non-empty spans inside of a td
 position: "right",
 // apply additional custom logic to display the text of the relevant element only
 content: function(e){
   var cell = $(e.target);
   if(cell.is('th')){
     return cell.children('a.k-link').text();
   }

   var content = cell.text();
   return content;
 },
 width: Infinity
};

I hope this helps.

Regards,
Dimiter Topalov
Telerik

[Rahul]

Hi Dimiter,

 

It works perfectly! Thanks a lot.

Here is the updated dojo sample if anyone wants to try it.

http://dojo.telerik.com/ajegO/7

 

Thanks,

Rahul