Installation
pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/tooltip.jsonUsage
<script lang="ts">
import * as Tooltip from "$lib/components/ui/tooltip/index.js";
</script>
<Tooltip.Root>
<Tooltip.Trigger>Hover me</Tooltip.Trigger>
<Tooltip.Popup>Helpful hint</Tooltip.Popup>
</Tooltip.Root>API Reference
Tooltip.Root
Root component. Wraps Tooltip.Root from Shards UI.
Tooltip.Trigger
Trigger element that shows the tooltip on hover/focus. Wraps Tooltip.Trigger from Shards UI.
Tooltip.Popup
Popup container that displays the tooltip content. Also exported as Tooltip.Content.
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" \| "bottom" \| "left" \| "right" | "top" | Side of the trigger to position the tooltip |
align | "start" \| "center" \| "end" | "center" | Alignment relative to the trigger |
sideOffset | number | 4 | Distance from the trigger in pixels |
portalProps | ComponentProps<typeof Tooltip.TooltipPrimitive.Portal> | - | Props forwarded to the internal portal (keepMounted, container, etc.); see the Shards UI Tooltip portal API |
Tooltip.Provider
Provider for grouping tooltips. Wraps Tooltip.Provider from Shards UI.
Tooltip.Handle
Creates a handle for detached tooltip triggers. Use new Tooltip.Handle<Payload>() to attach multiple triggers to one animated popup.
Examples
Grouped Tooltips
To group multiple tooltips so they appear instantly after the first one is opened, wrap them in Tooltip.Provider. The grouping logic ensures that once a tooltip becomes visible, the adjacent tooltips will be shown instantly.
Animated Tooltips
You can create animated tooltips that smoothly transition between different triggers using detached triggers. This pattern allows multiple triggers to share a single tooltip popup, with automatic animations for position, size, and content changes.
To create detached triggers:
- Create a handle using
new Tooltip.Handle<Payload>() - Attach the same handle to multiple
Tooltip.Triggercomponents - Each trigger provides a
payloadprop containing a content snippet - Use a single
Tooltip.Rootcomponent with the handle to render the popup