Tooltip

TooltipDirective API

When working on the application with LitElement, TooltipDirective can be used as an alternative way for adding sl-tooltip component. This is a LitElement specific directive - a custom LitElement directive. More information you can find here.

The TooltipDirective can be added to the anchor element e.g. button by passing a string for the tooltip content:

  ${tooltip('This tooltip is from a directive')}

The complete usage example might appear as follows:

  <sl-button ${tooltip('This tooltip is from a directive')}>I have a tooltip</sl-button>

Add config with the directive

You can also pass a second argument: a config object. Use this to control how the tooltip appears.

// Basic string content + position + max width
html`<sl-button ${tooltip('More info', { position: 'right', maxWidth: 240 })}>Hover me</sl-button>`;

// Use ariaRelation: 'label' when the tooltip should be used as the accessible label (e.g. icon only buttons)
html`<sl-button ${tooltip('Settings', { ariaRelation: 'label' })}><sl-icon name="smile"></sl-icon></sl-button>`;

Available config options

• position: Where the tooltip shows relative to the anchor. One of: top, right, bottom, left, top-start, top-end, right-start, right-end, bottom-start, bottom-end, left-start, left-end. Default: top.
• maxWidth: A number (pixels). The maximum width of the tooltip.
• ariaRelation: How the tooltip is linked for screen readers. A description (default) uses aria-describedby, label uses aria-labelledby and should be used when the tooltip text is the actual label of the anchor element (like an icon-only button).

If you omit a config it just uses its default behaviour. Config options are optional.

Tooltip.lazy helper

Tooltip.lazy is a small helper that creates a tooltip only when the user first hovers or focuses the target element. This avoids unnecessary processing if the user never interacts with it.

Basic shape:

import { Tooltip } from '@sl-design-system/tooltip';

const cleanup = Tooltip.lazy(targetElement, tooltip => {
  // Runs once when the tooltip is actually created
  tooltip.textContent = 'Hello there';
});

With options:

Tooltip.lazy(button, tooltip => {
    tooltip.textContent = 'Settings';
    tooltip.position = 'bottom-start';
  },
  {
    ariaRelation: 'label',
    context: shadowRoot,
    parentNode: someContainer,
  }
);

Available options

• ariaRelation: How the tooltip is linked for screen readers. A description (default) uses aria-describedby, label uses aria-labelledby and should be used when the tooltip text is the actual label of the anchor element (like an icon-only button).
• context: A Document or ShadowRoot to create the <sl-tooltip> element in. If not provided, the tooltip will be created on the target element if it has a shadowRoot, or the root node of the target element.
• parentNode: A Node where the tooltip element should be inserted. This can be useful when you don't want the tooltip to be added next to the anchor element. If not provided, it will be added next to the anchor element.

Tooltip API

Tooltip component has a range of properties to define the experience in different use cases. sl-tooltip component is recommended to use in all non-LitElement applications. Tooltip component should be a sibling of the element it is describing (not a child element).

Properties

Methods

Slots