Tutorial: Header tooltips

Header tooltips


Edit on GitHub

Overview

The headerTooltips plugin allows adding tooltips to the table headers. These tooltips contain the header's label. It a useful feature when the label is wider than the header that is holding it.

Quick setup

To enable the plugin, you simply need to set the headerTooltips property to true in Handsontable configuration. This will enable the the tooltips for both rows and columns.

Available options

Instead of setting the headerTooltips property to true, you can define it as an object containing these options:

  • the rows property defines if tooltips should be added to row headers,
  • the columns property defines if tooltips should be added to column headers,
  • the onlyTrimmed property defines if tooltips should be added only to headers, which content is trimmed by the header itself (the content being wider then the header).

See the examples for a live preview. Hover a mouse cursor over the header to see the tooltip.

Live examples

Tooltips displayed for both row and column headers

Tooltips displayed only for column headers, and only if their content's width exceeds the header width