string|objectthe text of the tooltip or the config for custom tooltip behavior

addTooltip() adds the target area in the list of areas over which the common tooltip instance is shown. If this area is the first one, addTooltip() creates the tooltip instance.

Basic Use

You can create a simple tooltip that will appear over an HTML area:

webix.TooltipControl.addTooltip("list","Books by Jeff Noon");

Where "list" is the ID of a div like this:

<div id="list">
...
</div>

You can also create tooltips for Webix views:

{
    view:"datatable", id:"grid",
    // ...config
}
// ...
webix.TooltipControl.addTooltip($$("grid"),"Books by Jeff Noon");

Custom Tooltips

The addTooltip function can be used for customizing tooltips, for example creating dynamic tooltips for HTML elements:

webix.TooltipControl.addTooltip("annotation", {
    $tooltipIn:function(node){
        let tooltip = webix.TooltipControl.getTooltip();
        tooltip.define("template", function(){
            return node.value || "Nothing here";
        });
        return node;
    }
});

where "annotation" is the ID of the following textarea:

<textarea rows="5" cols="40" name="annotation" id="annotation">
    Some book annotation is here
</textarea>

The config object can have the following properties that can be redefined:

• $tooltipIn - (function) defines how the tooltip will appear
• $tooltipMove - (function) defines how the tooltip will behave while the cursor is moved inside the target HTML area
• $tooltipOut - (function) defines what will happen after the cursor leaves the target area

Back to top