Tooltip
The Tooltip component displays contextual information when hovering over or focusing on an element.
Import
<script>
import { Tooltip } from 'svelte-fluentui';
</script>svelte
Basic Usage
<Tooltip content="This is a helpful tooltip">
<Button>Hover me</Button>
</Tooltip>svelte
Different Positions
<Tooltip content="Top tooltip" position="top">
<Button>Top</Button>
</Tooltip>
<Tooltip content="Bottom tooltip" position="bottom">
<Button>Bottom</Button>
</Tooltip>svelte
With Rich Content
<Tooltip>
<Button slot="trigger">Rich tooltip</Button>
<div slot="content">
<h4>Tooltip Title</h4>
<p>More detailed information here.</p>
</div>
</Tooltip>svelte
Properties
| Property | Type | Default | Description |
|---|---|---|---|
content | string | undefined | Tooltip text content |
position | 'top' | 'bottom' | 'left' | 'right' | 'top' | Tooltip position |
delay | number | 500 | Show delay in milliseconds |
Slots
| Slot | Description |
|---|---|
default | Element that triggers the tooltip |
trigger | Alternative slot for trigger element |
content | Rich content for the tooltip |