Components

Tooltip

A lightweight popup that displays additional information when hovering or focusing on an element.

Installation

npm install @trinkui/react

Import

import { Tooltip } from "@trinkui/react";

Usage

Wrap any element with the Tooltip component and provide the tooltip text via the content prop.

<Tooltip content="Save your changes">
  <Button>Save</Button>
</Tooltip>

Positions

Control where the tooltip appears relative to its trigger element.

<Tooltip content="Appears above" position="top">
  <Button>Top</Button>
</Tooltip>

<Tooltip content="Appears below" position="bottom">
  <Button>Bottom</Button>
</Tooltip>

<Tooltip content="Appears to the left" position="left">
  <Button>Left</Button>
</Tooltip>

<Tooltip content="Appears to the right" position="right">
  <Button>Right</Button>
</Tooltip>

Custom Delay

Use the delay prop to control how long (in milliseconds) before the tooltip appears.

{/* No delay — appears instantly */}
<Tooltip content="Instant" delay={0}>
  <Button>Hover me</Button>
</Tooltip>

{/* 500ms delay */}
<Tooltip content="Delayed tooltip" delay={500}>
  <Button>Hover me</Button>
</Tooltip>

Props

Prop	Type	Default	Description
content	string	-	Text content displayed inside the tooltip
position	"top" \| "bottom" \| "left" \| "right"	"top"	Preferred position of the tooltip relative to the trigger
delay	number	200	Delay in milliseconds before the tooltip appears
children	ReactNode	-	The trigger element that the tooltip is attached to

Accessibility

Uses role="tooltip" on the tooltip content element.
The trigger element has aria-describedby pointing to the tooltip, providing the supplementary description to screen readers.
Tooltip appears on both hover and keyboard focus, ensuring accessibility for keyboard-only users.
Tooltip dismisses on Escape key press.

← Toast User →