Components

Tooltip

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

Demo

Hover over the buttons to see tooltips

Tooltip on top

Tooltip on right

Tooltip on bottom

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 →