Column Tooltips

Add tooltips to column headers, as either simple text tooltips or custom, tag-based markup with optional trigger icon.

Choose from the default column-header style or match with the grid's internal-tooltip styling (text-tooltips only).

Simple Text Tooltip

To create a simple text tooltip, add header-tooltip-text to the desired column:

<zg-column header-tooltip-text="I'm a tooltip"></zg-column>
<zg-column header-tooltip-text="I'm a tooltip <strong>with markup</strong>"></zg-column>

add demo

Top

Content From Renderer Function

Control the tooltip output by using a detached, renderer function. Adding complex or involved tooltip content via inline-attribute can get unwieldy, fast. For example, you might want each tooltip to have the same custom markup, but have dynamic text based on the column's type/data. Replicating the code inline for each column is fragile and inefficient, and is not feasible for adding dynamic parts.

Instead, create a function (that returns a string) and associate it with the column.

<zing-grid>
  <zg-colgroup>
    <zg-column header-tooltip-renderer="myTooltip"></zg-column>
  </zg-colgroup>
</zing-grid>
...
<script>
function myTooltip(data) {
  return `I'm a tooltip: <strong>${data.someValue}</strong>`;
}
</script>

header-tooltip-renderer looks for a function on the global scope.

.registerMethod()

If you can't access the function in your project in this fashion, use ZingGrid's method-registration system to tell the grid how to find it.

<zing-grid id="myGrid">
  <zg-colgroup>
    <zg-column ... header-tooltip-renderer="myTooltip"></zg-column>
  </zg-colgroup>
</zing-grid>
...
<script>
  const ZG = document.querySelector('#myGrid');
  ZG.registerMethod('myTooltip', yourFnReference);
</script>

The data provided to the function includes: the FOO (data.foo), the BAR (data.bar), and the BAZ (data.baz).

add demo

Top

Content From HTML Template

Control the tooltip output by using an HTML template. Like the renderer function, you have access to dynamic data provided by the column.

<zing-grid>
  <zg-colgroup>
    <zg-column ... header-tooltip-template="myTooltip"></zg-column>
  </zg-colgroup>
</zing-grid>
...
<template id="myTooltip">
  I'm a tooltip: <strong>[[data.someValue]]</strong>
</template>

The data provided to the template includes: the FOO (data.foo), the BAR (data.bar), and the BAZ (data.baz).

add demo

Top

Tooltip Type and Styling

Column tooltips have their own distinct styling and composition that differs from the grid's internal 'system' tooltips (you can see these internal tooltips when hovering over the Insert New Record button, or some Caption and Pager icons).

They also allow you to customize the structure and layout of the tooltip content, by adding markup tags and dynamic content. Internal tooltips are plain-text and applied via CSS :before and :after selectors.

If you need the column tooltips to look like the internal tooltips for consistency, set header-tooltip-type="system" on the <zing-grid> tag (global) or individual <zg-column> tags.

To individually set a column back to the default styling if you globally set them as the system style, set the column's attribute value to the default default: header-tooltip-type="default"

<zing-grid ...>
  <zg-colgroup>
    <!-- Inherits global 'default' styling -->
    <zg-column ...>
    <!-- Overrides to show tooltip as 'system' styling -->
    <zg-column ... header-tooltip-type="system">
  </zg-colgroup>
</zing-grid>

System tooltips are populated and styled via CSS :before and :after selectors (for the 'arrow' and 'text bubble', respectively) and no markup is actually inserted into the header cell. A limitation of this method is the CSS content property only accepts plain text. Any tag added to the content string will be rendered as text, not as the element. Therefore, only set header-tooltip-type="system" if your tooltips contain only text.

Top

Icon (Trigger)

By default, tooltips are added to the header cell and activated on cell hover. You may optionally add an information icon () to the cell to help prompt the user to the tooltips' presence.

Set header-tooltip-trigger="icon" on the <zing-grid> tag (global) or individual <zg-column> tags, and the icon will appear on the right-side of the cell (you are able to change its positioning - see the section below).

If you need to individually set a column back to the default and hide the icon, set the column's attribute value to the default text: header-tooltip-trigger="text"

If you set the tooltip to use the system styling, the icon will not be available regardless of this attribute setting.

Icon Position

To orient the icon's position within the header cell, use header-tooltip-icon-position on the grid or individual columns with one of 3 options:

  • right - The default. This may be omitted unless being set to override the grid's global setting.
  • left - The icon is positioned on the left edge of the cell, before the text.
  • after-text - The icon is placed after the cell's header text.
<zing-grid ... header-tooltip-trigger="icon" header-tooltip-icon-position="left">
  <zg-colgroup>
    <!-- (Default) Shows the icon, positioned on the left -->
    <zg-column ...></zg-column>
    <!-- Overrides to position the icon immediately after the header text -->
    <zg-column ... header-tooltip-icon-position="after-text"></zg-column>
    <!-- Overrides to hide the icon -->
    <zg-column ... header-tooltip-trigger="text"></zg-column>
  </zg-colgroup>
</zing-grid>

add demo

Top

Activation Type

Tooltips are shown on hover by default. To change the activation method to click instead, set header-tooltip-action="click" on the <zing-grid> tag (global) or individual <zg-column> tags. Icons must be enabled for click activation to work.

<zing-grid ... header-tooltip-trigger="icon" header-tooltip-action="click">
  <zg-colgroup>
    <!-- Inherits global 'click' -->
    <zg-column ...>
    <!-- Overrides to 'hover' -->
    <zg-column ... header-tooltip-action="hover">
  </zg-colgroup>
</zing-grid>

Changing the activation type to click is only available when the icon is shown. Column sorting is activated by clicking the header cell, so it cannot also be used to show the tooltip. If you set the activation to click but forget to enable the icons, the tooltip will continue to show on hover but a <zg-status> alert will fire.

add demo

Top

Tooltip Position

By default, tooltips are revealed above the column header cell. To change the direction of the tooltip activation, set header-tooltip-position on the <zing-grid> tag (global) or individual <zg-column> tags with one of 4 options:

  • top - The default. This may be omitted unless being set to override the grid's global setting.
  • bottom
  • left
  • right
<zing-grid ... header-tooltip-position="right">
  <zg-colgroup>
    <!-- Inherits global 'right' position -->
    <zg-column ...>
    <!-- Overrides to reveal below the cell -->
    <zg-column ... header-tooltip-position="bottom">
  </zg-colgroup>
</zing-grid>

add demo

Top

Related Resources

TODO: Are there any or should this be removed?