How to add a tooltip to an Extjs 4 gridpanel row using an xTemplate

extjs gridpanel row tooltip

Please notice in the sample below that the function “hasValue” (or whatever you like to call it) is within the xTemplate, not in the tooltip itself !!!

This function is simply skipping fields that have no value. That doesn’t show the tooltip wit some empty labels.

How to do it

Some CSS

Bonus: How to have a tooltip on every grid cell it’s content doesn’t fit

Sometimes you don’t see the whole content in a grid cell. Then it would be nice if you could hover and that it would show a tooltip with the complete content popping up. This one is not from myself but from Joshua at this link. But the code that I found I modified a bit, for it would have some error interpreting rendered image (icons) as content that doesn’t fit. The result looks like this:

ExtJS Grid Cell Tooltip

How to do it?

You create a new file showConditionalToolTip.js as a plugin (don’t be afraid, it is also a javaScript file). You find the source code below. Then in your grid you declare the plugin. That’s all. But first the plugin itself.

Make sure that you modify the name of this plugin to your own application structure.

Now put the following code in your grid:

But be warned, it takes quite a toll on the performance of loading the grid. At least you can try it and see if it fits to your demand.

Johan van de Merwe
Dedicated to professional software development since 1985. Has worked since 1992 as IT manager in several international operating companies. Since 2007 CEO and Sencha Ext JS web application developer at Enovision GmbH.

Comments

  1. Balaram

    Hi
    This is helpful. I have a question. For certain cells with large data where EXT JS automatically truncates the data and appends ‘…’ to it. I want to put tool tip only for such cells. How do I achieve this?
    Thanks

    • James van de Merwe

      I have modified this post and added a section that might interest you regarding grid cell tooltips.

Leave a Reply

Time limit is exhausted. Please reload CAPTCHA.