Tooltip ​

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

Default ​

With Slots ​

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
}
Prop Default Type
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.

Slot Payload
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
}
Prop Default Type
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.

Slot Payload
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.

Introduction