Appearance
Tooltip
FTTooltip is a flexible and customizable tooltip component for Vue 3, built on top of vue3-popper. It provides advanced positioning, theming, and interaction options for tooltips and popovers.
Usage
INFO
vue
<template>
<FTTooltip content="Hello!" placement="bottom">
<button>Hover me</button>
</FTTooltip>
<FTTooltip :hover="true" theme="light">
<template #content>
<div style="color: #333">Custom <b>HTML</b> content</div>
</template>
<span>Hover for custom slot</span>
</FTTooltip>
</template><template>
<FTTooltip content="Hello!" placement="bottom">
<button>Hover me</button>
</FTTooltip>
<FTTooltip :hover="true" theme="light">
<template #content>
<div style="color: #333">Custom <b>HTML</b> content</div>
</template>
<span>Hover for custom slot</span>
</FTTooltip>
</template>Props
| Prop | Type | Default | Description |
|---|---|---|---|
theme | string | 'dark' | Tooltip theme: 'dark' or 'light'. |
placement | string | 'top' | Popper.js placement (e.g. 'top', 'bottom-end', etc.). |
disableClickAway | boolean | false | If true, disables closing tooltip on outside click. |
offsetSkid | string | '0' | Horizontal offset (skid) in px. |
offsetDistance | string | '12' | Vertical offset (distance) in px. |
hover | boolean | false | If true, opens on hover. |
arrow | boolean | false | Show arrow on tooltip. |
arrowPadding | string | '0' | Padding for the arrow. |
disabled | boolean | false | Disable the tooltip. |
openDelay | string | '0' | Delay before opening (ms). |
closeDelay | string | '0' | Delay before closing (ms). |
interactive | boolean | true | If true, tooltip content is interactive. |
content | string | undefined | Content for the tooltip (can also use slot). |
show | boolean | undefined | Control visibility programmatically. |
locked | boolean | false | If true, tooltip cannot be closed. |
zIndex | string | '9999' | z-index for the tooltip popper. |
Events
| Event | Description |
|---|---|
open:popper | Emitted when the tooltip is opened. |
close:popper | Emitted when the tooltip is closed. |
Slots
- default: The element that triggers the tooltip.
- content: Custom tooltip content (overrides
contentprop).
Styling
The component uses CSS variables for theming. You can override them in your global styles or use the .light/.dark classes for custom themes.