WARNING: This component is in
Draft
status. This means that it is still in development and may have bugs or missing features. It is not intended to be used in production. You may use it for testing purposes.Tooltip
A tooltip that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Hover over me!
I'm a tooltip!
import { component$ } from '@builder.io/qwik';
import { Tooltip } from '@qwik-ui/headless';
export default component$(() => {
return (
<>
<div>
<Tooltip
offset={8}
content="I'm a tooltip!"
class="rounded-base border-2 p-4 shadow-md"
>
<span>Hover over me!</span>
</Tooltip>
</div>
</>
);
});
Building blocks
import { component$ } from '@builder.io/qwik';
import { Tooltip } from '@qwik-ui/headless';
export default component$(() => (
<Tooltip content="Tooltip content">Trigger content</Tooltip>
));
Examples
Describing Icon with Tooltip
import { component$ } from '@builder.io/qwik';
import { Tooltip } from '@qwik-ui/headless';
import { GitHubIcon } from '~/components/icons/GitHubIcon';
export default component$(() => {
return (
<>
<div>
<Tooltip
content="Clicking this icon takes you to Qwik UI's GitHub repository!"
class="rounded-base bg-slate-200 p-4 dark:bg-gray-900"
>
<a href="https://github.com/qwikifiers/qwik-ui" class="mx-auto">
<GitHubIcon />
</a>
</Tooltip>
</div>
</>
);
});
Accessibility
Keyboard interaction
| Key | Description |
|---|---|
| Esc |
API
Tooltip
| Prop | Type | Description |
|---|---|---|
class | string | CSS classes to apply to the Tooltip. |
content | string | The content displayed in the Tooltip. |
durationMs | number | Sets a delay duration in milliseconds before the Tooltip is displayed. |
inline | boolean | Determines if the Tooltip is rendered inline. |
position | enum"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | Determines the position the Tooltip is rendered. |