Popup information displayed on hover or focus.
top / bottomStandard text popups next to form labels, icon-only buttons, active statsleft / rightSide navigation bar items, table actions, compact layout toolbarsrich contentDetailed descriptions with headers, list summaries, or custom HTML structuresdelay durationMuted helper copy that shouldn't display immediately to power usersThe information text displayed inside the popup window
Position of the tooltip relative to the trigger button
Theme styles: default, dark, or light
import { Tooltip, Button } from "nexoreui"
<Tooltip content="Tooltip text">
<Button variant="outline">Hover me</Button>
</Tooltip>| 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. |
role="tooltip" attributes are linked to targets.