Tooltip
Contextual information that appears when hovering over elements. Use for supplementary information.
Installation
Import
import { Tooltip } from '@svelte-atoms/core/tooltip';Preset Configuration
Customize the tooltip appearance using presets
You can customize the default styles for Tooltip components by defining presets in your configuration:
Examples
Explore different tooltip variations
Basic Tooltip
Simple tooltip on hover
Code
<Tooltip.Root>
<Tooltip.Trigger>
<button>Hover me</button>
</Tooltip.Trigger>
<Tooltip.Content>
This is a tooltip
</Tooltip.Content>
</Tooltip.Root>Tooltip Positions
Control tooltip placement
Code
<Tooltip.Root placement="top">
<Tooltip.Trigger>
<button>Top</button>
</Tooltip.Trigger>
<Tooltip.Content>
Top tooltip
</Tooltip.Content>
</Tooltip.Root>With Arrow
Tooltip with arrow indicator
Code
<Tooltip.Root>
<Tooltip.Trigger>
<button>Hover me</button>
</Tooltip.Trigger>
<Tooltip.Content>
Tooltip with arrow
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Root>API Reference
Tooltip.Root
Container for the tooltip component.
Prop
Type
Default
Description
open
boolean
false
Controls tooltip visibility (bindable)
placement
'top' | 'bottom' | 'left' | 'right' | ...
'top'
Tooltip position relative to trigger
offset
number
1
Distance from trigger element
disabled
boolean
false
Disable tooltip
Tooltip.Trigger
Element that triggers the tooltip on hover.
Prop
Type
Default
Description
class
string
''
Additional CSS classes
Tooltip.Content
The tooltip content that appears on hover.
Prop
Type
Default
Description
class
string
''
Additional CSS classes
Tooltip.Arrow
Optional arrow pointing to the trigger element.
Prop
Type
Default
Description
class
string
''
Additional CSS classes
Accessibility
Built-in Accessibility Features
- • Uses aria-describedby for association
- • Not shown on keyboard focus by default
- • Non-essential information only
- • Clear on mouse leave
- • Screen reader compatible