tooltip

sets a popup message next to the item when the cursor points to it

Example

// specifying a tooltip as a string
webix.ui({
    view:"list",
    tooltip:"Rating: #rating#<br/> Votes: #votes#",
    ...
});
 
// specifying a tooltip as a function
webix.ui({
    view:"dataview",
    template:"#title#",
    tooltip:function(obj){
        return "Rating: " + obj.rating + "<br/> Votes: " + obj.votes;
    },
    data:grid_data
});
 
// enabling auto tooltip for a datatable
webix.ui({
    view:"datatable",
    tooltip:true,
    columns:[
        { id:"name", header:"Name" },
        { id:"age", header:"Age" }
    ],
    data:[
        { id:1, name:"Ann", age:25 },
        { id:2, name:"Tom", age:27 }
    ]
});
 
// tooltip as a configuration object
webix.ui({
    view:"chart", type:"bar",
    value:"#sales#",
    label:"#sales#",
    tooltip:{
        template:"#sales#", 
        dx:10, dy:20,
        delay: 100
    },
    data: [
        { id:1, sales:20, year:"02" },
        { id:2, sales:55, year:"03" },
        { id:3, sales:40, year:"04" },
        { id:4, sales:78, year:"05" }
    ]
});

Related samples

In the first example, there are values transmitted from the dataset in the tooltip template (read the details).

In the second example, tooltips are created with the function that receives data objects.

In the third example, an automatic tooltip is enabled for a datatable (see the details on the Datatable tooltip).

In the forth example, the tooltip is set as an object with the tooltip configuration. The template of the tooltip can be set as a string or a function.

There is also an independent view Tooltip in the Webix library that can have custom positioning.