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 tip.body.update(content); }, 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.