addTooltip

adds a tooltip over an HTML element or a view

void addTooltip(string|HTMLElement target,string|object config);

Parameters

targetstring|HTMLElementthe ID of the target HTML element, the HTML element itself or a Webix view
configstring|objectthe text of the tooltip or the config for custom tooltip behavior
Details

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