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.

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.

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.

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.

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmailFacebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Leave a Reply

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