DataTable Tooltip is defined in a different way from tooltips for other data components.
To set default tooltips for all columns, set tooltip:true. A default tooltip shows the value of a cell, over which the cursor hovers at the moment.
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 }
]
});
// e.g. the tooltip for the first column of the first row is "Ann"
You can also define tooltip for all columns as a function. Within the common object you will be able to access the configuration of the related column and show the tooltip it needs.
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:"Name" },
{ id:"age", header:"Age" }
]
});
Related sample: Tooltips - Advanced Initialization
You can customize Tooltip for each column. For example, you can add text and style for tooltips. You can define column tooltips as a template string or as a function.
1. Template string. Tooltip strings access the data item values, so to display them, add the names of the fields surrounded with hashes (#). You can also cancel tooltips for some columns by setting tooltip:false
.
webix.ui({
view:"datatable",
tooltip:true,
columns:[
{
id:"name", header:"Name",
tooltip:"<span class='name_column_tip'>My name is #name#. I'm #age#.</span>"
},
{ id:"age", header:"Age", tooltip:false }
],
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."
2. Template function. Column tooltips can also be defined as functions that receive the data item object:
webix.ui({
view:"datatable",
tooltip:true,
columns:[
{
id:"name", header:"Name",
tooltip:function(object){
return "My name is " + obj.name + ". I'm " + obj.age + ".";
}
},
{ id:"age", header:"Age" }
],
data:[
{ id:1, name:"Ann", age:25 },
{ id:2, name:"Tom", age:27 }
]
});
Note that specific column tooltips override the common Datatable tooltip.
You can also define Tooltip only for certain columns. Set the tooltip property of Datatable as { template:"" }
and put tooltip:false
for each column you've chosen:
{
view:"datatable",
columns:[
{ id:"title", fillspace:true, tooltip:true, header:"Film title" },
{ id:"year", header:"Year"},
{ id:"votes", header:"Votes"}
],
tooltip:{template:""},
data:grid_data
}
You can add Webix tooltips for Datatable headers and footers.
Header tooltips can be defined as a:
webix.ui({
view:"datatable",
footer:true, tooltip:true,
columns:[
{
id:"title", width:200,
header:{ text:"Film", tooltip:true }
},
{
id:"year", width:80,
header:{ text:"Year", tooltip:"Release date is #text#" }
},
{
id:"votes", width:100,
header:{ text:"Votes", tooltip:function(obj){ return obj.text; } },
footer:{ content:"summColumn", tooltip:"Votes sum" }
}
],
data:some_data
});
Related sample: Tooltip:: Datatable
Within a tooltip function you can access the configuration object of a header / footer line.
If you have a filter or other content element in this line, you can get it with the getHeaderContent method by the ID available as obj.contentId. And provide its current value for the tooltip:
webix.ui({
view:"datatable", id:"dt",
footer: true, tooltip:true,
columns:[
{
id:"votes", header:[{text:"Votes", rowspan:2, tooltip:"#text#"}, ""],
width:100, footer:{
content:"summColumn",
tooltip:function(obj){
var value = $$("dt").getHeaderContent(obj.contentId).getValue();
return "Total value: " + value;
}
}
}
]
});
Related sample: Tooltip:: Datatable
If a column of Datatable displays sparklines, the default tooltips will also display sparklines. You can customize tooltips. For example, let's make them display the values of the sparkline items:
webix.ui({
view:"datatable",
data:[
{ id:1, name:"Austria", income:[710, 780, 390, 660, 600] },
{ id:2, name:"France", income:[810, 500, 780, 800, 940] }
],
tooltip:true,
columns:[
{
id:"income", header:"Income per Month",
template:"{common.sparklines()}", width:200,
tooltip:function(obj,common,value){
return value || "";
}
}
]
});
The tooltip function in this case receives 3 parameters:
Related sample: Tooltip:: Datatable Sparklines
Back to top