Photonix

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Preview

Usage
import { Tooltip } from '@photonix/ultimate';

<Tooltip content="Top Tooltip" position="top">
  <Button variant="secondary">Hover Top</Button>
</Tooltip>

Component API

Tooltip

Prop
Type
Default
Description
content
string
-
Tooltip content text
position
TooltipPosition
'top'
Preferred position of tooltip relative to trigger element. Will flip if screen edge is hit.
variant
TooltipVariant
'black'
Color variant: 'black' for light backgrounds, 'white' for dark backgrounds
children
React.ReactNode
-
Element that triggers the tooltip
className
string
-
Additional CSS class
delay
number
200
Delay before showing tooltip (ms)

Variants

Positions

Tooltips can be positioned on any side of the trigger.

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

Color Variants

Choose between black (default) or white tooltips.

Color Variants
<Tooltip content="Black (Default)" variant="black">
  <Button>Black</Button>
</Tooltip>
<Tooltip content="White" variant="white">
  <Button>White</Button>
</Tooltip>

On this page

Preview
Component API
Variants
Positions
Photonix UI - React Components, Templates & Figma Design System