Tooltip
Floating label on bits-ui Tooltip. Shows on focus and hover with a zoom-fade keyed to the trigger corner; dismisses on blur or Esc.
Usage
tooltip.svelte
<script lang="ts">
import { Tooltip as TooltipPrimitive } from 'bits-ui';
let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
</script>
<TooltipPrimitive.Root
bind:open
{...restProps}
{...{ 'data-slot': 'tooltip' } as Record<string, unknown>}
/>
Sides
tooltip-sides.svelte
<script lang="ts">
import { Tooltip as TooltipPrimitive } from 'bits-ui';
let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
</script>
<TooltipPrimitive.Root
bind:open
{...restProps}
{...{ 'data-slot': 'tooltip' } as Record<string, unknown>}
/>
Tooltip.Provider props
Wrap your tooltip-rich region once. Inherits bits-ui Tooltip.Provider props via spread.
| Prop | Type | Default | Description |
|---|---|---|---|
number | 700 | Milliseconds of hover before the tooltip opens. | |
boolean | false | When true, moving onto the tooltip content does not keep it open. |
Tooltip.Content props
| Prop | Type | Default | Description |
|---|---|---|---|
'top' | 'right' | 'bottom' | 'left' | 'top' | Preferred anchor edge. Collision logic may flip. | |
number | 0 | Distance in px between the trigger and the content. | |
ComponentProps<Tooltip.Portal> | — | Forwarded to the internal portal. |