Tooltip

Contextual information on hover or focus.

On This Page

Contextual information on hover or focus.

Tooltips

Popup information displayed on hover or focus.

top / bottomStandard text popups next to form labels, icon-only buttons, active stats

left / rightSide navigation bar items, table actions, compact layout toolbars

rich contentDetailed descriptions with headers, list summaries, or custom HTML structures

delay durationMuted helper copy that shouldn't display immediately to power users

Live CanvasInteractive

Controls(3)

content

text

The information text displayed inside the popup window

side

select

Position of the tooltip relative to the trigger button

variant

select

Theme styles: default, dark, or light

Generated JSX

import { Tooltip } from "nexoreui"

<Tooltip />

component.tsx

component.tsx

component.tsx

component.tsx

component.tsx

Page 1 of 3

Prop	Type	Default	Description
content*	React.ReactNode	`—`	The content (text or elements) displayed inside the tooltip bubble.
side	"top" \| "bottom" \| "left" \| "right"	`"top"`	Display position placement relative to the trigger element.
variant	"default" \| "dark" \| "light"	`"default"`	Color theme style variant.
delayDuration	number	`700`	Time delay in milliseconds before the tooltip appears.
sideOffset	number	`4`	Offset distance from the trigger element in pixels.

Keyboard & Focus: Opens when the trigger receives keyboard focus, closing automatically when blurred or when the Escape key is pressed.
ARIA mapping: Uses Radix UI Tooltip primitives, ensuring correct role="tooltip" attributes are linked to targets.

On This Page