A
Auralix UI

Tooltip

A popup that displays information on hover or focus.

Preview

Installation

bash
npx auralix-ui add tooltip

Usage

Basic Tooltip

tsx
import { Tooltip } from "@/components/ui/Tooltip";
import { Button } from "@/components/ui/Button";

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

Tooltip Positions

tsx
<Tooltip content="Top" position="top">
  <Button>Top</Button>
</Tooltip>
<Tooltip content="Bottom" position="bottom">
  <Button>Bottom</Button>
</Tooltip>
<Tooltip content="Left" position="left">
  <Button>Left</Button>
</Tooltip>
<Tooltip content="Right" position="right">
  <Button>Right</Button>
</Tooltip>

Props

NameTypeDefaultDescription
contentstring-The tooltip text content.
position"top" | "bottom" | "left" | "right""top"The position of the tooltip.
childrenReactNode-The trigger element.

Variants

Simple
Rich
Arrow
ModalTable