Light Dark System

Tooltip

<zn-tooltip> | ZnTooltip
Since 1.0 experimental

The Tooltip component is used to display additional information when a user hovers over or clicks on an element.

Examples

Basic Tooltip

Tooltips appear when a user hovers or focuses an element. They provide contextual information about the element they are paired with.

A tooltip’s target is its first child element, so you should only wrap one element inside of the tooltip. If you need the tooltip to show up for multiple elements, nest them inside a container first.

Tooltips use display: contents so they won’t interfere with how elements are positioned in a flex or grid layout.

Hover Me 
<zn-tooltip content="This is a tooltip">
  <zn-button>Hover Me</zn-button>
</zn-tooltip>

Placement

Use the placement attribute to set the preferred placement of the tooltip.

<div class="tooltip-placement-example">
  <div class="tooltip-placement-example-row">
    <zn-tooltip content="top-start" placement="top-start">
      <zn-button></zn-button>
    </zn-tooltip>

    <zn-tooltip content="top" placement="top">
      <zn-button></zn-button>
    </zn-tooltip>

    <zn-tooltip content="top-end" placement="top-end">
      <zn-button></zn-button>
    </zn-tooltip>
  </div>

  <div class="tooltip-placement-example-row">
    <zn-tooltip content="left-start" placement="left-start">
      <zn-button></zn-button>
    </zn-tooltip>

    <zn-tooltip content="right-start" placement="right-start">
      <zn-button></zn-button>
    </zn-tooltip>
  </div>

  <div class="tooltip-placement-example-row">
    <zn-tooltip content="left" placement="left">
      <zn-button></zn-button>
    </zn-tooltip>

    <zn-tooltip content="right" placement="right">
      <zn-button></zn-button>
    </zn-tooltip>
  </div>

  <div class="tooltip-placement-example-row">
    <zn-tooltip content="left-end" placement="left-end">
      <zn-button></zn-button>
    </zn-tooltip>

    <zn-tooltip content="right-end" placement="right-end">
      <zn-button></zn-button>
    </zn-tooltip>
  </div>

  <div class="tooltip-placement-example-row">
    <zn-tooltip content="bottom-start" placement="bottom-start">
      <zn-button></zn-button>
    </zn-tooltip>

    <zn-tooltip content="bottom" placement="bottom">
      <zn-button></zn-button>
    </zn-tooltip>

    <zn-tooltip content="bottom-end" placement="bottom-end">
      <zn-button></zn-button>
    </zn-tooltip>
  </div>
</div>

<style>
  .tooltip-placement-example {
    width: 250px;
    margin: 1rem;
  }

  .tooltip-placement-example-row:after {
    content: '';
    display: table;
    clear: both;
  }

  .tooltip-placement-example zn-button {
    float: left;
    width: 2.5rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
  }

  .tooltip-placement-example-row:nth-child(1) zn-tooltip:first-child zn-button,
  .tooltip-placement-example-row:nth-child(5) zn-tooltip:first-child zn-button {
    margin-left: calc(40px + 0.25rem);
  }

  .tooltip-placement-example-row:nth-child(2) zn-tooltip:nth-child(2) zn-button,
  .tooltip-placement-example-row:nth-child(3) zn-tooltip:nth-child(2) zn-button,
  .tooltip-placement-example-row:nth-child(4) zn-tooltip:nth-child(2) zn-button {
    margin-left: calc((40px * 3) + (0.25rem * 3));
  }
</style>

Click Trigger

Set the trigger attribute to click to toggle the tooltip on click instead of hover.

Click to Toggle 
<zn-tooltip content="Click again to dismiss" trigger="click">
  <zn-button>Click to Toggle</zn-button>
</zn-tooltip>

Manual Trigger

Tooltips can be controlled programmatically by setting the trigger attribute to manual. Use the open attribute to control when the tooltip is shown.

Toggle Manually 
<zn-button style="margin-right: 4rem;">Toggle Manually</zn-button>

<zn-tooltip content="This is an avatar" trigger="manual" class="manual-tooltip">
  <zn-avatar label="User"></zn-avatar>
</zn-tooltip>

<script>
  const tooltip = document.querySelector('.manual-tooltip');
  const toggle = tooltip.previousElementSibling;

  toggle.addEventListener('click', () => (tooltip.open = !tooltip.open));
</script>

Removing Arrows

You can control the size of tooltip arrows by overriding the --zn-tooltip-arrow-size design token. To remove them, set the value to 0 as shown below.

No Arrow 
<zn-tooltip content="This is a tooltip" style="--zn-tooltip-arrow-size: 0;">
  <zn-button>No Arrow</zn-button>
</zn-tooltip>

HTML in Tooltips

Use the content slot to create tooltips with HTML content. Tooltips are designed only for text and presentational elements. Avoid placing interactive content, such as buttons, links, and form controls, in a tooltip.

I’m not just a tooltip, I’m a tooltip with HTML!
Hover me 
<zn-tooltip>
  <div slot="content">I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!</div>

  <zn-button>Hover me</zn-button>
</zn-tooltip>

Setting a Maximum Width

Use the --max-width custom property to change the width the tooltip can grow to before wrapping occurs.

Hover me 
<zn-tooltip style="--max-width: 80px;" content="This tooltip will wrap after only 80 pixels.">
  <zn-button>Hover me</zn-button>
</zn-tooltip>

Hoisting

Tooltips will be clipped if they’re inside a container that has overflow: auto|hidden|scroll. The hoist attribute forces the tooltip to use a fixed positioning strategy, allowing it to break out of the container. In this case, the tooltip will be positioned relative to its containing block, which is usually the viewport unless an ancestor uses a transform, perspective, or filter. Refer to this page for more details.

No Hoist Hoist 
<div class="tooltip-hoist">
  <zn-tooltip content="This is a tooltip">
    <zn-button>No Hoist</zn-button>
  </zn-tooltip>

  <zn-tooltip content="This is a tooltip" hoist>
    <zn-button>Hoist</zn-button>
  </zn-tooltip>
</div>

<style>
  .tooltip-hoist {
    position: relative;
    border: solid 2px var(--zn-panel-border-color);
    overflow: hidden;
    padding: var(--zn-spacing-medium);
  }
</style>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/tooltip/tooltip.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/tooltip/tooltip.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/tooltip/tooltip.js';

Slots

Name Description
(default) The content of the tooltip
anchor The anchor the tooltip is attached to.

Learn more about using slots.

Events

Name React Event Description Event Detail
zn-show Emitted when the tooltip is shown. -
zn-after-show Emitted after the tooltip is shown. -
zn-hide Emitted when the tooltip is hidden. -
zn-after-hide Emitted after the tooltip is hidden. -

Learn more about events.