Tool tip

Usage

ToolTip displays informative text when users hover, focus, or click a target.

import { ToolTip, Button } from "@udixio/ui-react"

Variants

• plain (default): small text bubble
• rich: card-like with title, text and actions

<div className="flex gap-6">
  <ToolTip text="Plain tooltip">
    <Button label="Plain" />
  </ToolTip>
  <ToolTip variant="rich" title="Saved" text="Item added to favorites" buttons={[{ label: 'Undo', variant: 'text' }] }>
    <Button label="Rich" />
  </ToolTip>
</div>

Triggers

Control how the tooltip appears using trigger: “hover”, “focus”, “click” or an array of these.

Position

Provide an explicit position or let it auto-place based on target position.