Tooltip ​

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Default ​

vue
<script setup lang="ts">
import { Button, Tooltip } from 'frappe-ui'
</script>

<template>
  <Tooltip text="This action cannot be undone" :hover-delay="0" placement="top">
    <Button theme="red">Delete</Button>
  </Tooltip>
</template>

With Slots ​

vue
<script setup lang="ts">
import { Button, Tooltip } from 'frappe-ui'
</script>

<template>
  <Tooltip arrow-class="fill-surface-white" placement="top">
    <template #body>
      <div
        class="min-w-[6rem] rounded bg-surface-white px-2 py-1 text-xs text-ink-gray-9 shadow-xl"
      >
        Test
      </div>
    </template>
    <Button theme="red">Delete</Button>
  </Tooltip>
</template>

Grouping (shared hover delay) ​

Wrap a group of buttons in a TooltipProvider so that once one tooltip is open, moving the pointer to a neighbouring trigger within skip-delay opens its tooltip instantly — no delay between adjacent buttons. Tooltip and tooltip-bearing Buttons automatically reuse a surrounding provider instead of creating their own.

vue
<script setup lang="ts">
import { Button, Tooltip, TooltipProvider } from 'frappe-ui'
</script>

<template>
  <!--
    Hover any button to open its tooltip after `hover-delay`. Sweeping the
    pointer to a neighbour within `skip-delay` opens the next tooltip
    instantly — no per-button flicker — because the whole row shares one
    tooltip context.
  -->
  <TooltipProvider :hover-delay="0.5" :skip-delay="0.3">
    <div class="flex items-center gap-1">
      <Button icon="bold" :tooltip="'Bold'" />
      <Button icon="italic" :tooltip="'Italic'" />
      <Button icon="underline" :tooltip="'Underline'" />
      <Tooltip text="Strikethrough">
        <Button icon="minus" />
      </Tooltip>
    </div>
  </TooltipProvider>
</template>

API Reference ​

Tooltip ​

Show types
typescript
import { type HTMLAttributes } from 'vue'
import { type TooltipContentProps } from 'reka-ui'

export interface TooltipProps {
  /**
   * Text content shown inside the tooltip.
   * Ignored if a default slot is provided.
   */
  text?: string

  /**
   * Delay (in ms) before showing the tooltip on hover.
   */
  hoverDelay?: number

  /**
   * Position of the tooltip relative to the trigger.
   */
  placement?: TooltipContentProps['side']

  /**
   * Custom classes applied to the tooltip arrow.
   */
  arrowClass?: HTMLAttributes['class']

  /**
   * Disables the tooltip entirely.
   */
  disabled?: boolean
}
text
= ""
string

Text content shown inside the tooltip. Ignored if a default slot is provided.

hoverDelay
= 0.5
number

Delay (in ms) before showing the tooltip on hover.

placement
= "top"
"bottom" | "top" | "right" | "left"

Position of the tooltip relative to the trigger.

arrowClass
= "fill-surface-gray-7"
any

Custom classes applied to the tooltip arrow.

disabled
= false
boolean

Disables the tooltip entirely.

default
—

Default trigger slot. Wraps the element that the tooltip is attached to.

body
—

Slot for fully custom tooltip body. Replaces the default tooltip container entirely.

content
—

Slot for tooltip content text. Used inside the default tooltip body.

TooltipBubble ​

Show types
typescript
import { type HTMLAttributes } from 'vue'
import { type TooltipContentProps } from 'reka-ui'

export interface TooltipProps {
  /**
   * Text content shown inside the tooltip.
   * Ignored if a default slot is provided.
   */
  text?: string

  /**
   * Delay (in ms) before showing the tooltip on hover.
   */
  hoverDelay?: number

  /**
   * Position of the tooltip relative to the trigger.
   */
  placement?: TooltipContentProps['side']

  /**
   * Custom classes applied to the tooltip arrow.
   */
  arrowClass?: HTMLAttributes['class']

  /**
   * Disables the tooltip entirely.
   */
  disabled?: boolean
}
side
= "top"
"bottom" | "top" | "right" | "left"

Preferred popover side relative to the trigger.

text
string

Text content when neither `#content` nor `#body` is provided.

arrowClass
= "fill-surface-gray-7"
string

Fill class for the arrow — defaults to match the bubble shell.

default
—

Replaces just the text inside the standard bubble.

content
—

Replaces just the text inside the standard bubble.

body
—

Replaces the entire bubble (including its shell) — arrow still renders.

ToastTree