Tooltip

Import

import { Tooltip } from 'tuimorphic';

Basic Usage

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

Props

Prop	Type	Default	Description
content	`React.ReactNode`	-	Tooltip content (required)
children	`React.ReactElement`	-	Element that triggers the tooltip (required)
side	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Preferred side to render
delay	`number`	`200`	Delay before showing (ms)
className	`string`	-	Additional CSS class names for the popup

Variants

Position Variants

<Tooltip content="Above" side="top">
  <Button>Top</Button>
</Tooltip>
 
<Tooltip content="Below" side="bottom">
  <Button>Bottom</Button>
</Tooltip>
 
<Tooltip content="To the left" side="left">
  <Button>Left</Button>
</Tooltip>
 
<Tooltip content="To the right" side="right">
  <Button>Right</Button>
</Tooltip>

Custom Delay

<Tooltip content="Quick tooltip" delay={0}>
  <Button>Instant</Button>
</Tooltip>
 
<Tooltip content="Slow tooltip" delay={500}>
  <Button>Delayed</Button>
</Tooltip>

Rich Content

<Tooltip content={<><strong>Tip:</strong> Press Ctrl+S to save</>}>
  <Button>Save</Button>
</Tooltip>

With Icons

<Tooltip content="More options">
  <Button>...</Button>
</Tooltip>
 
<Tooltip content="Settings">
  <Button>Gear Icon</Button>
</Tooltip>

On Various Elements

<Tooltip content="Click to learn more">
  <a href="/docs">Documentation</a>
</Tooltip>
 
<Tooltip content="Current status: Active">
  <Badge variant="success">Online</Badge>
</Tooltip>

On this page