Tooltip

Use one focusable trigger. Essential instructions should remain visible elsewhere.

Preview

Open in the playground

Usage

TooltipExample.vueVue / TS

<script setup lang="ts">
import { FzTooltip } from '@chrisdalbano/forza-ui'
</script>

<template>
  <FzTooltip text="Tune your build"
    ><button type="button">Settings</button></FzTooltip
  >
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
text	string	Yes	None
delay	number | undefined	No	250

Events and state

hover/focus managed by primitive

Slots

default: one focusable trigger

Add from source

forza add tooltip

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.