Tabulator: Adding Tooltip to show truncated cell data

[vshankaa]

If the content of the cell exceeds the cell width then only partial data is shown. How can we show the full cell data, may be on hover via a tooltip?

[olifolkerd]

Nice idea, i will add a tooltip parameter to the column definitions this evening

[vshankaa]

Thanks!

[olifolkerd]

Tooltips have been added to version 1.9.0. They can either be set globally using the _tooltips_ options parameter:

$("#example-table").tabulator({
    tooltips:true,
});

Or on a per column basis in the column definition array:

//column definition in the columns array
{formatter:printIcon, width:40, align:"center", tooltip:true},

The tooltip parameter can take three different types of value

• boolean - a value of _false_ disables the tooltip, a value of _true_ sets the tooltip of the cell to its value
• string - a string that will be displayed for all cells in the matching column/table.
• function - a callback function that returns the string for the cell. see below:

See Formatting Data for full details.

[vshankaa]

Thank you very much! It's working great! :+1:

[texperts]

Its very nice but if we have an option to add styles, then it would be more comfortable.

[olifolkerd]

They are built in browser tool tips. There is no styling option for this.

If you want a more.custom experience with tooltips then I would suggest using a custom formatter function and use one of the many high quality tooltip libraries that are out there.

Cheers

Oli 🙂