DataGrid Tooltip

Default Tooltips for Columns

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 DataGrid Tooltip

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

Custom Tooltips for Specific Columns

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.

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.grid({
    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."

Template function. Column tooltips can also be defined as functions that receive the data item object:

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

Related sample: Tooltips

Note that specific column tooltips override the common DataGrid tooltip.

Setting Tooltips for Certain Columns

You can also define Tooltip only for certain columns. Set the tooltip property of DataGrid as { template:"" } and put tooltip:false for each column you’ve chosen:

webix.grid({
  columns:[
    { id:"title", fillspace:true, tooltip:true, header:"Film title" },
    { id:"year", header:"Year"},
    { id:"votes", header:"Votes"}
  ],
  tooltip:{template:""},
  data:grid_data
})

Header and Footer Tooltips

You can add Webix tooltips for DataGrid headers and footers.

Header tooltips can be defined as a:

boolean true that displays header text,
template string that can access header/footer line properties,
function that receives the header/footer line object.

webix.grid({
  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:: DataGrid

Showing Data of Header / Footer Content Elements

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.grid({
    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:: DataGrid

Sparkline Tooltips

If a column of DataGrid 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.grid({
  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:

obj (object) - the data object of the DataGrid row,
common (object) - the template object of a column,
value (number) - the value of the sparkline item.