Tooltip

A tooltip component that displays contextual information on hover or click. Supports multiple placements and controlled/uncontrolled modes.

Basic Usage

import { Tooltip, Button } from 'uiplex';

<Tooltip label="This is a tooltip">
  <Button>Hover me</Button>
</Tooltip>

Placements

<Tooltip label="Top tooltip" placement="top">
  <Button>Top</Button>
</Tooltip>
<Tooltip label="Bottom tooltip" placement="bottom">
  <Button>Bottom</Button>
</Tooltip>
<Tooltip label="Left tooltip" placement="left">
  <Button>Left</Button>
</Tooltip>
<Tooltip label="Right tooltip" placement="right">
  <Button>Right</Button>
</Tooltip>

Controlled Mode

const [isOpen, setIsOpen] = useState(false);

<Tooltip label="Controlled tooltip" isOpen={isOpen}>
  <Button onClick={() => setIsOpen(!isOpen)}>Toggle</Button>
</Tooltip>

API Reference

Prop	Type	Default	Description
children	React.ReactElement	-	Trigger element
label	string	-	Tooltip text content
placement	"top" \| "bottom" \| "left" \| "right"	"top"	Tooltip placement relative to trigger
isOpen	boolean	-	Controlled open state
defaultIsOpen	boolean	false	Initial open state (uncontrolled)
closeOnClick	boolean	false	Close tooltip on click
width	string \| number	-	Width of the tooltip (e.g., "300px", 300, "100%"). Enables text wrapping when set.
className	string	""	Additional CSS classes
style	React.CSSProperties	-	Inline styles