Components
Tooltip
A shared tooltip renderer driven by the tooltip attachment.
Props
Native attributes and event handlers are forwarded to the underlying div element unless
handled by the component.
Mount one Tooltip in your application layout. Content and placement come from the tooltip attachment; the renderer uses the shared tooltip store.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet<[string]> | undefined | Custom renderer receiving string tooltip content. |
class | string | '' | Tailwind classes merged with the theme and variants. |
element | HTMLDivElement | null | null | Bindable reference to the underlying DOM element. |
gap | number | 8 | Distance in pixels between the trigger and floating content. |
inTransition | TransitionProps | undefined | Overrides the opening transition. |
isVisible | boolean | true | Controls visibility while the tooltip store has an active tooltip. |
outTransition | TransitionProps | undefined | Overrides the closing transition. |
theme | Theme | global theme | Optional local theme override. |
transition | TransitionProps | [noopTransition, {}] | A Svelte transition function and its options. |
variants | string[] | [] | Local variant names or theme references such as button.base. |
Default usage
Import Tooltip from sveltewind/components. This example shows its default styling in a usable context.
Loading...Examples
Theme variants
Every variant available for Tooltip in the built-in themes is shown below.
compact — Apply the compact variant.
Loading...spacious — Apply the spacious variant.
Loading...soft — Apply the soft variant.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Loading...Props and behavior
Increase the gap and place the tooltip below its trigger.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Loading...