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.

Does anyone know how to do this?

 

Thanks.

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

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

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

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

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