Tooltip

A few words that describe a button or a link, shown on mouse hover and keyboard focus.

<script setup lang="ts">
import { FsButton, FsTooltip } from '@fivespark/ui'
</script>

<template>
  <div class="flex min-h-32 items-end">
    <FsTooltip text="Sneltoets: Ctrl + S" v-slot="{ props }">
      <FsButton v-bind="props" label="Opslaan" />
    </FsTooltip>
  </div>
</template>

Usage

Wrap the trigger and bind the props the slot gives on it.

<script setup lang="ts">
import { FsButton, FsTooltip } from '@fivespark/ui'
</script>

<template>
  <FsTooltip text="Sneltoets: Ctrl + S" v-slot="{ props }">
    <FsButton v-bind="props" label="Opslaan" />
  </FsTooltip>
</template>

The text adds to what the trigger shows and is never the only place something needed is said; it is plain text, a few words. The trigger must be a button or a link. For longer or richer content, use Popover.

Examples

Icon-only buttons

An icon-only Button or Toggle shows its own name in a tooltip, with no FsTooltip around it.

<script setup lang="ts">
import { FsButton } from '@fivespark/ui'
</script>

<template>
  <div class="flex min-h-32 items-end gap-2">
    <FsButton icon="pencil" label="Bewerken" variant="ghost" />
    <FsButton icon="copy" label="Dupliceren" variant="ghost" />
  </div>
</template>

On a disabled button

A disabled FsButton stays focusable, so its tooltip can say why it is blocked.

<script setup lang="ts">
import { FsButton, FsTooltip } from '@fivespark/ui'
</script>

<template>
  <div class="flex min-h-32 items-end">
    <FsTooltip text="Kies eerst een klant." v-slot="{ props }">
      <FsButton v-bind="props" label="Offerte versturen" variant="primary" disabled />
    </FsTooltip>
  </div>
</template>

Keyboard

Key	Does
Tab	Focusing the trigger shows the tooltip; moving away hides it
Esc	Hides the tooltip and leaves focus where it is

API Reference

FsTooltip

Prop	Type	Default	Description
text	string	required	The description: a few words that add to what the trigger shows, never the only place something needed is said.

Slot	Props	Description
default	{ props: Record<string, unknown>; }	The button or link it describes: bind `props` on it, `<FsButton v-bind="props" label="Versturen" disabled />`.