Tooltip

The Tooltip component provides a way to display informative text when users hover over or click on an element.

About

The Tooltip component shows a short piece of text when the visitor hovers or focuses an element. Render it once per page, then opt individual elements in with a data-tooltip attribute.

This component is highly flexible and supports various animations, colors, and positions. You can easily configure its behavior to appear on hover or click, making it suitable for a wide range of use cases. The Tooltip is designed to be accessible and visually appealing, with customizable animations and styles.

Example

Import & Initialize Tooltip

To use the Tooltip component, first import it from theui-svelte. It's recommended to initialize Tooltip globally, such as in +layout.svelte, to make tooltips available throughout your app. Alternatively, you can include it on specific pages where needed.

+layout.svelte 
<script>
  import { Tooltip } from "theui-svelte";
</script>

<Tooltip />

Use with an Element

Once initialized, the Tooltip component enables tooltips in your application. It works in the background, automatically handling hover interactions for elements with tooltip attributes. The data-tooltip text can include simple HTML (like <br>); it is sanitized before rendering.

Svelte 
<Button data-tooltip="I'm tooltip!">Open tooltip</Button>

Position

The Tooltip component lets you control its position using the position prop or the data-tooltip-position attribute. The position prop applies to all tooltips, while data-tooltip-position affects only a specific trigger.

By default, the tooltip is displayed at the top, but you can change it to bottom, left, or right as needed. For more precise control, you can use variations like top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, and right-end to adjust alignment based on your design requirements.

Svelte 
<!-- Applied to all the Tooltip -->
<Tooltip position="top-end" />

<!-- Applied only to the Tooltip of the trigger -->
<Button data-tooltip-position="top-end" data-tooltip="...">...</Button>

Trigger Event

You can control how the tooltip appears using the triggerEvent prop or the data-tooltip-event attribute on the trigger element.

  • The triggerEvent prop applies the same event to all tooltips. By default, it is set to hover, but you can change it to click to trigger the tooltip on click instead.
  • The data-tooltip-event attribute allows setting the event for a specific tooltip without affecting others.
Svelte 
<Button data-tooltip="I'm tooltip!" data-tooltip-event="hover">Click me</Button>
<Button data-tooltip="I'm tooltip!" data-tooltip-event="click">Click me</Button>

Animation Speed

You can control the tooltip's animation speed using the animationSpeed prop or the data-tooltip-animation-speed attribute on the trigger element. Available values are none, slower, slow, normal, fast and faster.

  • The animationSpeed prop applies the same animation speed to all tooltips.
  • The data-tooltip-animation-speed attribute allows setting the animation speed for a specific tooltip without affecting others.
Svelte 
<Button data-tooltip="I'm tooltip!" data-tooltip-animation-speed="none">Button</Button>

Rounded Corner

You can customize the tooltip's border-radius using the rounded prop or the data-tooltip-rounded attribute on the trigger element. Available values are sm, md, lg (default), xl, 2xl, full and none.

  • The rounded prop applies the same corner style to all tooltips.
  • The data-tooltip-rounded attribute allows setting a different border-radius for specific tooltips without affecting others.
Svelte 
<Button data-tooltip="I'm tooltip!" data-tooltip-rounded="none">Button</Button>

Tooltip Gap

You can adjust the spacing between the tooltip and its trigger using the gap prop or the data-tooltip-gap attribute on the trigger element. Default gap is 12(px), and the minimum is 8(px).

  • The gap prop sets the spacing for all tooltips globally.
  • The data-tooltip-gap attribute allows setting the spacing for a specific tooltip without affecting others.
Svelte 
<Button data-tooltip="I'm tooltip!" data-tooltip-gap="20">Button</Button>

Customization

You can customize the Tooltip component using the class attribute on the tooltip itself or the data-tooltip-style attribute on the trigger element.

  • The class attribute applied directly to the Tooltip component will be applied to all tooltips.
  • The data-tooltip-style attribute, when added to a trigger, will style only the tooltip associated with that specific trigger.
Svelte 
<Button data-tooltip="I'm tooltip!" data-tooltip-style="bg-emerald-600 text-emerald-100">Button</Button>

Anything else you pass reaches the element itself, so a title, a data-* attribute or an event handler all work the way they would on a <div>. The id is the exception: the component sets its own from the id of the element the tooltip describes.

Accessibility

A tooltip is only useful if it can be reached without a mouse. Here is what the component handles, and what is left to you:

  1. Keyboard Navigation
    • Users can open and close the tooltip using the Space or Enter keys on a focused trigger when triggerEvent="click".
    • Pressing Escape closes any open tooltip, whether it is triggered by hover or click.
    • The tooltips triggered by hover are also accessible via focus for keyboard users.
  2. ARIA Attributes

    The tooltip sets these ARIA attributes itself:

    • The tooltip container has role="tooltip".
    • If the trigger element has an id, the tooltip gets the id <trigger-id>-tooltip, and aria-describedby is added to the trigger while the tooltip is open. Give your triggers an id so screen readers can announce the tooltip text.
  3. Focus Management
    • Focus always stays on the trigger; the tooltip itself does not receive focus.
    • The tooltip closes when focus moves away from the trigger, when the user clicks outside of it, or (in click mode) when the trigger is clicked again.

Configuration