Appearance
Tooltip Button
FTTooltipButton combines FTButton and FTTooltip into a single component. Use it when a button should optionally expose helper text without manually wrapping FTButton in FTTooltip.
Usage
vue
<script setup lang="ts">
import { FTTooltipButton } from '@fasttrack-solutions/vue-components-lib';
</script><script setup lang="ts">
import { FTTooltipButton } from '@fasttrack-solutions/vue-components-lib';
</script>Basic example
vue
<FTTooltipButton
primary
icon="fas plus"
tooltip="Create a new record"
tooltipPlacement="top"
>
Create
</FTTooltipButton><FTTooltipButton
primary
icon="fas plus"
tooltip="Create a new record"
tooltipPlacement="top"
>
Create
</FTTooltipButton>Without tooltip
When tooltip is empty or null, the component renders a plain FTButton.
vue
<FTTooltipButton secondary :tooltip="null">
Plain Button
</FTTooltipButton><FTTooltipButton secondary :tooltip="null">
Plain Button
</FTTooltipButton>Props
FTTooltipButton accepts the same button props as FTButton, except the old tooltip props are replaced by:
| Prop | Type | Default | Description |
|---|---|---|---|
tooltip | string | null | undefined | Tooltip text. When omitted, no tooltip wrapper is rendered. |
tooltipPlacement | FTTooltipButtonPlacement | 'auto' | Placement passed to FTTooltip. |
Slots
| Slot | Description |
|---|---|
default | Button content. |