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
"use client";

import { Button, Flex, Tooltip } from '@photonix/ultimate';

export default function TooltipBasicExample() {
    return (
        <Flex gap="sm" wrap align="center">
            <Tooltip content="Save changes" position="top">
                <Button variant="secondary">Top</Button>
            </Tooltip>
            <Tooltip content="Open details" position="bottom">
                <Button variant="secondary">Bottom</Button>
            </Tooltip>
            <Tooltip content="Danger action" position="right" variant="white">
                <Button variant="primary">Right</Button>
            </Tooltip>
        </Flex>
    );
}

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
"use client";

import { Button, Flex, Tooltip } from '@photonix/ultimate';

export default function TooltipPositionsExample() {
    return (
        <Flex gap="md" justify="center" wrap="wrap">
            <Tooltip content="Top Tooltip" position="top">
                <Button variant="secondary">Top</Button>
            </Tooltip>
            <Tooltip content="Right Tooltip" position="right">
                <Button variant="secondary">Right</Button>
            </Tooltip>
            <Tooltip content="Bottom Tooltip" position="bottom">
                <Button variant="secondary">Bottom</Button>
            </Tooltip>
            <Tooltip content="Left Tooltip" position="left">
                <Button variant="secondary">Left</Button>
            </Tooltip>
        </Flex>
    );
}

Color Variants

Choose between black and white tooltip surfaces.

Color Variants
"use client";

import { Button, Flex, Tooltip } from '@photonix/ultimate';

export default function TooltipVariantsExample() {
    return (
        <Flex gap="md" justify="center" bg="secondary" borderRadius="2xs" p="md">
            <Tooltip content="Black Tooltip" variant="black">
                <Button variant="secondary">Black</Button>
            </Tooltip>
            <Tooltip content="White Tooltip" variant="white">
                <Button variant="secondary">White</Button>
            </Tooltip>
        </Flex>
    );
}

On this page

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