Tooltip

Label

Contract

Overview

Machine-readable contract from Component Spec.

component: tooltipexport: Tooltipversion: 1attributes: data-refineui=tooltip

Anatomy

Part	data-refineui
root	tooltip

States

Scope	Category	Values
component	environment	forced-colors, dir

Accessibility

Slot	Element	Role
tooltip	div	tooltip

Keyboard

Key	Action	Native
Escape	close	—

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { Tooltip } from "@refineui/react";

<Tooltip trigger={<Button>Hover me</Button>} content="Helpful tooltip text" />

<Tooltip
  trigger={<IconButton icon="info" />}
  content="Extended information"
  position="Top"
  align="Center"
/>

API Reference

Prop	Default	Type	Description
trigger	—	ReactNode	Element that triggers the tooltip (required).
content	—	ReactNode	Tooltip content (required).
position	"Top"	"Top" | "Left" | "Bottom" | "Right"	Position relative to trigger.
align	"Center"	"Start" | "Center" | "End"	Alignment along the edge.
delayMs	700	number	Delay before showing (milliseconds).
open	—	boolean	Controlled open state.
defaultOpen	—	boolean	Uncontrolled initial open state.
onOpenChange	—	(open: boolean) => void	Event handler when open state changes.