Tooltip

A small text bubble that explains its trigger on hover or keyboard focus. It is the standard companion of IconButton.

import { Tooltip } from 'jarvis-react-ui';

Basic

Wrap a single focusable element. The tooltip opens after delayMs (300ms by default) on hover and immediately on keyboard focus.

import { Copy } from 'lucide-react';
import { IconButton, Tooltip } from 'jarvis-react-ui';

export default function Basic() {
    return (
        <Tooltip content="Copy code">
            <IconButton icon={Copy} label="Copy" />
        </Tooltip>
    );
}

Placements

placement puts the bubble on the top (default), bottom, left or right of the trigger. The bubble does not flip when it runs out of space, so choose a side with room.

import { Button, Tooltip } from 'jarvis-react-ui';

export default function Placements() {
    return (
        <>
            <Tooltip content="Above" placement="top">
                <Button size="sm">Top</Button>
            </Tooltip>
            <Tooltip content="Below" placement="bottom">
                <Button size="sm">Bottom</Button>
            </Tooltip>
            <Tooltip content="To the left" placement="left">
                <Button size="sm">Left</Button>
            </Tooltip>
            <Tooltip content="To the right" placement="right">
                <Button size="sm">Right</Button>
            </Tooltip>
        </>
    );
}

Toolbar

A row of icon buttons with tooltips below them. delayMs={0} opens them instantly while the pointer sweeps across the toolbar.

import { FileCode, Maximize2, Volume2 } from 'lucide-react';
import { IconButton, Tooltip } from 'jarvis-react-ui';

export default function Toolbar() {
    return (
        <div className="flex items-center gap-1">
            <Tooltip content="View source" placement="bottom" delayMs={0}>
                <IconButton icon={FileCode} label="Source" />
            </Tooltip>
            <Tooltip content="Toggle sound" placement="bottom" delayMs={0}>
                <IconButton icon={Volume2} label="Sound" />
            </Tooltip>
            <Tooltip content="Fullscreen" placement="bottom" delayMs={0}>
                <IconButton icon={Maximize2} label="Fullscreen" />
            </Tooltip>
        </div>
    );
}

Note: Positioning

The bubble is absolutely positioned next to the trigger, not portaled. Ancestors with overflow: hidden clip it.

Accessibility

• The bubble has role="tooltip" and an id; while it is open the trigger gets aria-describedby pointing at it.
• It opens on focus and closes on blur and on Escape.
• Tooltip content is a supplementary description. Do not put interactive content in it, and do not rely on it as the only accessible name of the trigger (give an IconButton its label).
• disabled keeps the tooltip mounted but never shows it.

API

Type TooltipTriggerProps

Props the tooltip injects into its trigger element.