# 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.
```html
```
### 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 ` `); it is sanitized before rendering.
```html
```
## 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.
```html
```
## 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.
```html
```
## 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.
```html
```
## 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.
```html
```
## 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.
```html
```
## 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.
```html
```
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 `
`. 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:
- **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.
- **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 `-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.
- **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
### Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `position` | [Placement](https://www.theui.dev/docs/types#placement) | `top` | Controls where the tooltip appears relative to the trigger element. Can be overridden per trigger with `data-tooltip-position`. |
| `triggerEvent` | 'hover' \| 'click' | `hover` | Determines how the tooltip is triggered, either on hover or click. Can be overridden per trigger with `data-tooltip-event`. |
| `animationSpeed` | [ANIMATE_SPEED](https://www.theui.dev/docs/types#animation-speed-type) | `normal` | Sets the animation speed for showing and hiding the tooltip. Can be overridden per trigger with `data-tooltip-animation-speed`. |
| `rounded` | [ROUNDED](https://www.theui.dev/docs/types#rounded-type) | `lg` | Defines the border-radius of the tooltip for corner styling. Can be overridden per trigger with `data-tooltip-rounded`. |
| `gap` | number | `12` | Specifies the spacing (in px) between the tooltip and the trigger element. The minimum is 8. Can be overridden per trigger with `data-tooltip-gap`. |
---
Category: Components
Keywords: tooltip, info, popup, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss
Full documentation set: https://www.theui.dev/llms-full.txt