Tooltip

A floating label that appears when the user hovers over or focuses on a trigger element. Automatically repositions itself to stay within the viewport and supports animated transitions.

Import

import { Tooltip } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<Tooltip content="Edit this item">
  <button>Edit</button>
</Tooltip>

Placement

<Tooltip content="Above" placement="top">
  <button>Top</button>
</Tooltip>

<Tooltip content="Below" placement="bottom">
  <button>Bottom</button>
</Tooltip>

<Tooltip content="Left side" placement="left">
  <button>Left</button>
</Tooltip>

<Tooltip content="Right side" placement="right">
  <button>Right</button>
</Tooltip>

Variants

<Tooltip content="Dark tooltip" variant="default">
  <button>Default</button>
</Tooltip>

<Tooltip content="Light tooltip" variant="light">
  <button>Light</button>
</Tooltip>

<Tooltip content="Brand tooltip" variant="primary">
  <button>Primary</button>
</Tooltip>

Custom delay

<Tooltip content="Appears quickly" delay={100}>
  <button>Fast</button>
</Tooltip>

Disabled

<Tooltip content="This won't show" disabled>
  <button>No tooltip</button>
</Tooltip>

Props

Prop	Type	Default	Description
`content`*	React.ReactNode	-	The tooltip content to display. Can be text or any React node.
`children`*	React.ReactElement	-	The trigger element that the tooltip is attached to. Must be a single React element.
`placement`	'top' \| 'bottom' \| 'left' \| 'right'	`'top'`	Preferred placement of the tooltip relative to the trigger.
`variant`	'default' \| 'light' \| 'primary'	`'default'`	Visual style variant. "default" is dark, "light" has a bordered white background, "primary" uses the brand color.
`delay`	number	`300`	Delay in milliseconds before the tooltip appears on hover.
`disabled`	boolean	`false`	When true, the tooltip will not appear on hover or focus.
`className`	string	-	Additional CSS classes for the tooltip element.