Lucent UI
← EmptyStateTooltipTabs →
✦ LLM-ready

Tooltip

molecule

On-hover contextual hint anchored to a trigger element. Four directional placements and a configurable show delay.

"Wrap an icon button with a Tooltip from lucent-ui. Use placement="top" and a descriptive content string."

Usage

React / JSX
import { Tooltip } from 'lucent-ui'

<Tooltip placement="top" delay={300} content="This is a tooltip">
  <Button variant="outline">Hover me</Button>
</Tooltip>

Installation

pnpm add lucent-ui

API Reference

Tooltip props — * required

PropTypeDefaultDescription
content*string—Tooltip message text.
placement"top" | "bottom" | "left" | "right""top"Direction the tooltip appears relative to the trigger.
delaynumber300Milliseconds before the tooltip appears on hover.
children*React.ReactNode—The trigger element.