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>

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