ExtJs 3.4 – Using tooltips

Tooltips provide an easy way to add useful information without cluttering the screen with enourmass chunks of data. ExtJs has fitted a couple of elements with a default tooltip. Button, Grid.Column.Header and Window are examples of that.

But sometimes you find yourself wanting to emphasize other things like a grid, rows, grid cells, an icon or blocks of text.

There is qtip, which can be placed within the HTML code directly to provide the user with a simple tooltip. But you have to encode everything to not make the first “ or ‘ break it.

So I recommend using the tooltip class.

Basic tooltip

This will set a tooltip on any element with the CSS class “tooltip-target” that is within the the panel “this.mainPanel”.

The CSS class does not have to exist for this to work. You might however want to add an empty CSS class with a comment, just to be sure it doesn’t get cleaned out by accident by someone that stumbles upon it.

var tip = new Ext.ToolTip({
   target: this.mainPanel.getEl(),     //target to apply tooltip on (also scope of the search, MUST be an Ext.element)
   delegate: '.tooltip-target', //target the tooltip will be shown on
   delay: 0,                   //how long to hover before showing
   trackMouse: false,          //follow the pointer while over element
   renderTo: document.body,    //where to draw, document.body is recommended
   autoHide: false,            //don’t hide after a while
   anchor: "right",            //where to show the arrow on the tooltip
   html: "Tooltip content"     //content to show

Grid cell

To make it work on a grid, just provide a different delegate and target. This will popup when hovering a row. If you want to make it select on just some cells, make up your mind in the renderer, by adding the previously mentioned “.tooltip-target” as delegate.

var gridTip = new Ext.ToolTip({
   target: this.grid.getView().mainBody,
   delegate: '.x-grid3-row',
   renderTo:  document.body,
   html: "Tooltip content"

Updating the content from given element

Nice, but now I got fixed content within the tooltip, making it hard to use. You first thought might be: “I could make more CSS classes to hang other tooltips from .”

Consider that every tooltip will be activated when entering the scope of its target elements. This could create a performance hit.

Instead update the content of the tooltip with the element you just hovered over. Is most cases like with a grid the data that the element you hovered over originated from is in a store. Or more precise, inside a record.

So for a grid you could use this after creating the tooltip.

gridTip.on("beforeshow", function(tip) {
   //the element being hovered over
   var triggerElement = tip.triggerElement;            

   //get row index
   var rowIndex = this.grid.getView().findRowIndex(triggerElement);

      //get record
      var record = this.grid.getStore().getAt(rowIndex);

      //you could also format this
      //or use another store to add even more information
      var content = record.get(“some-column”);

      //update the tooltip
}, this);

Update tooltip with call

As long as the function is delayed, the tooltip will not be shown. So it is a good practice to add a loading message and update the tooltip as soon as data from example an AJAX call is available.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.