Tooltip

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

About

The Tooltip component is a lightweight and customizable element that displays additional information when users interact with a target element. It enhances user experience by providing context or details without cluttering the interface.

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.

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-position attribute. The position prop applies to all tooltips, while data-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 animate prop or the data-tooltip-animate attribute on the trigger element. Available values are none, slower, slow, normal, fast and faster.

  • The animate prop applies the same animation speed to all tooltips.
  • The data-tooltip-animate attribute allows setting the animation speed for a specific tooltip without affecting others.
Svelte 
<Button data-tooltip="I'm tooltip!" data-tooltip-animate="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, xl, 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).

  • 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>

Accessibility

Ensuring tooltips are accessible improves usability for all users, including those using keyboards and screen readers. Below are key accessibility considerations for the Tooltip component:

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

    To enhance screen reader compatibility, the tooltip automatically includes essential ARIA attributes:

    • The aria-controls links the trigger element to the tooltip container.
    • The aria-haspopup on the trigger element to indicate a tooltip is available.
  3. Focus Management
    • When opened, focus remains on the trigger or shifts inside the tooltip for better navigation.
    • When closed, focus returns to the trigger element to maintain a logical navigation flow.

Configuration