Tooltip
A popup that shows information when an element is focused or hovered over.
I'm a tooltip!
import { component$, useStyles$ } from '@builder.io/qwik';
import { Tooltip } from '@qwik-ui/headless';
export default component$(() => {
useStyles$(styles);
return (
<Tooltip.Root>
<Tooltip.Trigger class="tooltip-trigger">Hover over me</Tooltip.Trigger>
<Tooltip.Content class="tooltip-content">I'm a tooltip!</Tooltip.Content>
</Tooltip.Root>
);
});
// internal
import styles from '../snippets/tooltip.css?inline';
✨ Features
- Above the rest of the page
- Hover and non-hover behavior
- Close with escape
Building blocks
import { component$ } from '@builder.io/qwik';
import { Tooltip } from '@qwik-ui/headless';
export default component$(() => {
return (
<Tooltip.Root>
<Tooltip.Trigger>Trigger</Tooltip.Trigger>
<Tooltip.Panel>Panel</Tooltip.Panel>
</Tooltip.Root>
);
});🎨 Anatomy
| Component | Description |
Tooltip.Root | The parent container for the tooltip trigger and panel. |
Tooltip.Trigger | A button that opens the tooltip when interacted with. |
Tooltip.Panel | An HTML Element that is above other content on the page. |
API
Tooltip Root
| Prop | Type | Description |
|---|---|---|
hover | boolean | Disables hover behavior. |
flip | boolean | Flips the placement of the tooltip when it starts to collide with the boundaries. |
gutter | number | The space between the floating element and the anchored element. |
floating | string | The floating position of the tooltip. |