tooltip

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

 let tooltip: string|boolean|function|WebixAutoTooltipConfig

Example

webix.grid({
  tooltip:"Rating: #rating#<br/> Votes: #votes#",
  ...
});

webix.grid({
  tooltip:function(obj){
    return "Rating: " + obj.rating + "<br/> Votes: " + obj.votes;
  },
  data:grid_data
});

webix.grid({
    tooltip:true,
    columns:[
        { id:"name", header:"Name" },
        { id:"age", header:"Age" }
    ],
    data:[
        { id:1, name:"Ann", age:25 },
        { id:2, name:"Tom", age:27 }
    ]
});

webix.grid({
    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" }
    ]
});

also check the next samples:

• Template of Tooltips

Details

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 datagrid (see the details on the DataGrid 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.

See also

Articles

• DataGrid Tooltip
• Cells Templates