Tooltip
Accessible tooltip with hover/focus trigger.
Features
- 4 positions — top, bottom, left, right
- Hover + focus — Triggers on both
- Delay — Configurable show delay
- Escape to close — Keyboard dismissal
- Accessible — aria-describedby linking
Usage
vue
<script setup>
import { FkTooltip, FkButton } from '@fortune-kit/components'
</script>
<template>
<FkTooltip content="Helpful information" position="top">
<FkButton>Hover me</FkButton>
</FkTooltip>
</template>Props
| Prop | Type | Default | Description |
|---|---|---|---|
content | string | Required | Tooltip text |
position | 'top' | 'bottom' | 'left' | 'right' | 'top' | Tooltip position |
delay | number | 200 | Show delay (ms) |
disabled | boolean | false | Disable tooltip |