Intermediate

Tooltip Implementation

Tooltip stands out of the fixed pattern. It lies above other ui-related components, which makes it similar to window and popup.

Tooltip is connected with some component or its item and becomes visible when you place a mouse pointer over it and disappears when it leaves the area. Doesn't it resemble onMouseOver/onMouseOut events? Still, event handling is quite another story.

Here, you don't need any specific code to make it work. You should just include a Tooltip into the necessary component and specify the info to be shown inside the Tooltip area.

Tooltip may include text as well as items from the dataset.

webix.ui({
    view:"dataview",
    ...
    tooltip:{
        template:"<span class='webix_strong'>Rating: </span> #rating#<br/>
        <span class='webix_strong'>Votes: </span> #votes#"
    }
});

Related sample:  Template of Tooltips

By default, Tooltip is placed on the same level with the mouse pointer, 20 px to the right from it.

To change this pattern, specify the coordinates relative to the mouse pointer as values of dx and dy properties.

tooltip:{
    template:"<span class='webix_strong'>Rating: </span> #rating#<br/>
    <span class='webix_strong'>Votes: </span> #votes#",
    dx: 10, //20 by default
    dy:5    // 0 by default
}

There is also the Tooltip view for which you can specify custom positioning.

DataTable Tooltip

DataTable Tooltip is defined in quite another way. Several steps are possible:

  • Setting tooltip:true for the whole component. It enables Tooltip functionality for the grid and shows Tooltip for each column showing the row value that stands as ID for this column.

General DataTable Tooltip

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}
    ]
});
// the tooltip for the first column of the first row is "Ann"
  • Customizing Tooltip data for each column. Tooltip should be switched on for the whole grid:
webix.ui({
    view:"datatable",
    tooltip:true,
    columns:[
        {id:"name", header:"Name", tooltip:"My name is #name#. I'm #age#."},
        {id:"age", header:"Age"}
    ],
    data:[
        {id:1, name:"Ann", age:25},
        {id:2, name:"Tom", age:27}
    ]
});
// tooltip for the first column of the first row is "My name is Ann. I'm 25."
  • Setting Tooltip for DataTable header. Tooltip should be switched on for the whole grid:
webix.ui({
    view:"datatable",
    tooltip:true,
    columns:[
        {id:"name", header:"<span title='My tooltip text'>Name</span>"},
        {id:"age", header:"Age"}
    ]
});
// Tooltip for the Name column is "My tooltip text"

Advanced Tooltip configuration

Instead of defining Tooltip for each column separately, you can define Tooltip once for all columns

webix.ui({
    view:"datatable",
    tooltip:function(obj, common){
        //obj - row object
        //common.column - configuration of related column
 
        return "<i>"+obj[common.column.id]+"</i>";
    },
    columns:[
        {id:"name", header:"<span title='My tooltip text'>Name</span>"},
        {id:"age", header:"Age"}
    ]
});
Back to top