Tooltip

Tooltip is a component that displays a tooltip when the user hovers over an element.

preview

Usage#

import { Tooltip } from '@primereact/ui/tooltip';

<Tooltip.Manager>
    <Tooltip.Root>
        <Tooltip.Trigger>Hover me</Tooltip.Trigger>
        <Tooltip.Portal>
            <Tooltip.Positioner>
                <Tooltip.Popup>
                    Tooltip content
                    <Tooltip.Arrow />
                </Tooltip.Popup>
            </Tooltip.Positioner>
        </Tooltip.Portal>
    </Tooltip.Root>
</Tooltip.Manager>

Examples#

Basic#

Shows additional context for an element on hover.

basic-demo

import { Button } from '@primereact/ui/button';
import { Tooltip } from '@primereact/ui/tooltip';

export default function BasicDemo() {
    return (
        <div className="flex items-center justify-center">
            <Tooltip.Manager>
                <Tooltip.Root>
                    <Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
                        Hover me
                    </Tooltip.Trigger>
                    <Tooltip.Portal>
                        <Tooltip.Positioner sideOffset={8}>
                            <Tooltip.Popup>
                                <div className="font-semibold text-sm">Quick Tip</div>
                                <div className="opacity-75 text-sm mt-1">You can use tooltips to display helpful information on hover.</div>
                            </Tooltip.Popup>
                        </Tooltip.Positioner>
                    </Tooltip.Portal>
                </Tooltip.Root>
            </Tooltip.Manager>
        </div>
    );
}

Standalone#

Tooltip.Manager only coordinates a group of tooltips, so moving between adjacent ones skips the open delay. A single tooltip doesn't need it, wrap just the Tooltip.Root and its openDelay is honored on its own.

standalone-demo

import { Button } from '@primereact/ui/button';
import { Tooltip } from '@primereact/ui/tooltip';

export default function StandaloneDemo() {
    return (
        <div className="flex items-center justify-center gap-4">
            {/* No Tooltip.Manager wrapper — each Tooltip.Root works on its own */}
            <Tooltip.Root>
                <Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
                    Default delays
                </Tooltip.Trigger>
                <Tooltip.Portal>
                    <Tooltip.Positioner sideOffset={8}>
                        <Tooltip.Popup>
                            <Tooltip.Arrow />
                            <div className="font-semibold text-sm">No manager needed</div>
                            <div className="opacity-75 text-sm mt-1">Used standalone, without a Tooltip.Manager.</div>
                        </Tooltip.Popup>
                    </Tooltip.Positioner>
                </Tooltip.Portal>
            </Tooltip.Root>

            <Tooltip.Root openDelay={1200} closeDelay={800}>
                <Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
                    1200ms open · 800ms close
                </Tooltip.Trigger>
                <Tooltip.Portal>
                    <Tooltip.Positioner sideOffset={8}>
                        <Tooltip.Popup>
                            <Tooltip.Arrow />
                            <div className="font-semibold text-sm">Independent timing</div>
                            <div className="opacity-75 text-sm mt-1">Waits 1200ms to open, lingers 800ms after you leave.</div>
                        </Tooltip.Popup>
                    </Tooltip.Positioner>
                </Tooltip.Portal>
            </Tooltip.Root>
        </div>
    );
}

Arrow#

Use Tooltip.Arrow to display an arrow on the tooltip.

arrow-demo

import { Button } from '@primereact/ui/button';
import { Tooltip } from '@primereact/ui/tooltip';

export default function ArrowDemo() {
    return (
        <div className="flex items-center justify-center">
            <Tooltip.Manager>
                <Tooltip.Root>
                    <Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
                        Hover me
                    </Tooltip.Trigger>
                    <Tooltip.Portal>
                        <Tooltip.Positioner sideOffset={8}>
                            <Tooltip.Popup className="w-60 p-2.5">
                                <Tooltip.Arrow />
                                <div className="font-semibold text-sm">Quick Tip</div>
                                <div className="opacity-75 text-sm mt-1">You can use tooltips to display helpful information on hover.</div>
                            </Tooltip.Popup>
                        </Tooltip.Positioner>
                    </Tooltip.Portal>
                </Tooltip.Root>
            </Tooltip.Manager>
        </div>
    );
}

Placement#

Use side and align to control the placement of the tooltip.

placement-demo

import { Button } from '@primereact/ui/button';
import { Tooltip } from '@primereact/ui/tooltip';

const placements = [
    { side: 'top', align: 'start' },
    { side: 'top', align: 'center' },
    { side: 'top', align: 'end' },
    { side: 'right', align: 'start' },
    { side: 'right', align: 'center' },
    { side: 'right', align: 'end' },
    { side: 'bottom', align: 'start' },
    { side: 'bottom', align: 'center' },
    { side: 'bottom', align: 'end' },
    { side: 'left', align: 'start' },
    { side: 'left', align: 'center' },
    { side: 'left', align: 'end' }
] as const;

export default function PlacementDemo() {
    return (
        <div className="grid grid-cols-3 items-center w-fit mx-auto justify-center gap-4">
            <Tooltip.Manager>
                {placements.map((placement, index) => (
                    <Tooltip.Root key={index}>
                        <Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
                            {placement.side} - {placement.align}
                        </Tooltip.Trigger>
                        <Tooltip.Portal>
                            <Tooltip.Positioner side={placement.side} align={placement.align} sideOffset={8}>
                                <Tooltip.Popup>
                                    <Tooltip.Arrow />
                                    <div className="font-semibold text-sm">Quick Tip</div>
                                    <div className="opacity-75 text-sm mt-1">You can use tooltips to display helpful information on hover.</div>
                                </Tooltip.Popup>
                            </Tooltip.Positioner>
                        </Tooltip.Portal>
                    </Tooltip.Root>
                ))}
            </Tooltip.Manager>
        </div>
    );
}

Offset#

Use sideOffset and alignOffset to control the offset of the tooltip.

offset-demo

import { Button } from '@primereact/ui/button';
import { Tooltip } from '@primereact/ui/tooltip';

export default function OffsetDemo() {
    return (
        <div className="flex items-center justify-center gap-4">
            <Tooltip.Manager>
                <Tooltip.Root>
                    <Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
                        Side Offset
                    </Tooltip.Trigger>
                    <Tooltip.Portal>
                        <Tooltip.Positioner sideOffset={24}>
                            <Tooltip.Popup>
                                <Tooltip.Arrow />
                                <div className="font-semibold text-sm">Quick Tip</div>
                                <div className="opacity-75 text-sm mt-1">You can use tooltips to display helpful information on hover.</div>
                            </Tooltip.Popup>
                        </Tooltip.Positioner>
                    </Tooltip.Portal>
                </Tooltip.Root>
            </Tooltip.Manager>
            <Tooltip.Manager>
                <Tooltip.Root>
                    <Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
                        Align Offset
                    </Tooltip.Trigger>
                    <Tooltip.Portal>
                        <Tooltip.Positioner sideOffset={8} align="start" alignOffset={24}>
                            <Tooltip.Popup>
                                <Tooltip.Arrow />
                                <div className="font-semibold text-sm">Quick Tip</div>
                                <div className="opacity-75 text-sm mt-1">You can use tooltips to display helpful information on hover.</div>
                            </Tooltip.Popup>
                        </Tooltip.Positioner>
                    </Tooltip.Portal>
                </Tooltip.Root>
            </Tooltip.Manager>
        </div>
    );
}

Delay#

Use openDelay and closeDelay to control tooltip timing. For Tooltip.Manager, use timeout to control delay when moving between adjacent tooltips.

delay-demo

import { Button } from '@primereact/ui/button';
import { Tooltip } from '@primereact/ui/tooltip';

export default function DelayDemo() {
    return (
        <div className="flex items-center justify-center gap-4">
            <Tooltip.Manager>
                <Tooltip.Root openDelay={500} closeDelay={1000}>
                    <Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
                        500ms Open / 1000ms Close
                    </Tooltip.Trigger>
                    <Tooltip.Portal>
                        <Tooltip.Positioner sideOffset={8}>
                            <Tooltip.Popup>
                                <Tooltip.Arrow />
                                <div className="font-semibold text-sm">Quick Tip</div>
                                <div className="opacity-75 text-sm mt-1">You can use tooltips to display helpful information on hover.</div>
                            </Tooltip.Popup>
                        </Tooltip.Positioner>
                    </Tooltip.Portal>
                </Tooltip.Root>
            </Tooltip.Manager>
            <Tooltip.Manager openDelay={1000} closeDelay={500}>
                <Tooltip.Root>
                    <Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
                        1000ms Open / 500ms Close
                    </Tooltip.Trigger>
                    <Tooltip.Portal>
                        <Tooltip.Positioner sideOffset={8}>
                            <Tooltip.Popup>
                                <Tooltip.Arrow />
                                <div className="font-semibold text-sm">Quick Tip</div>
                                <div className="opacity-75 text-sm mt-1">You can use tooltips to display helpful information on hover.</div>
                            </Tooltip.Popup>
                        </Tooltip.Positioner>
                    </Tooltip.Portal>
                </Tooltip.Root>
            </Tooltip.Manager>
        </div>
    );
}

Controlled#

Use open and onOpenChange to control the tooltip programmatically.

controlled-demo

'use client';
import { Button } from '@primereact/ui/button';
import { Tooltip } from '@primereact/ui/tooltip';
import { TooltipRootChangeEvent } from '@primereact/ui/tooltip';
import * as React from 'react';

export default function ControlledDemo() {
    const [open, setOpen] = React.useState(false);

    return (
        <div className="flex items-center justify-center gap-4">
            <Tooltip.Manager>
                <Tooltip.Root open={open} onOpenChange={(e: TooltipRootChangeEvent) => setOpen(e.value || false)}>
                    <Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
                        Tooltip is {open ? 'open' : 'close'}
                    </Tooltip.Trigger>
                    <Tooltip.Portal>
                        <Tooltip.Positioner sideOffset={8}>
                            <Tooltip.Popup>
                                <Tooltip.Arrow />
                                <div className="font-semibold text-sm">Quick Tip</div>
                                <div className="opacity-75 text-sm mt-1">You can use tooltips to display helpful information on hover.</div>
                            </Tooltip.Popup>
                        </Tooltip.Positioner>
                    </Tooltip.Portal>
                </Tooltip.Root>
            </Tooltip.Manager>
        </div>
    );
}

With ToggleButton#

Tooltip can be combined with ToggleButton components to show contextual labels for grouped actions.

with-togglebutton-demo

'use client';
import { AlignCenter } from '@primeicons/react/align-center';
import { AlignJustify } from '@primeicons/react/align-justify';
import { AlignLeft } from '@primeicons/react/align-left';
import { AlignRight } from '@primeicons/react/align-right';
import { ToggleButton } from '@primereact/ui/togglebutton';
import { ToggleButtonGroup } from '@primereact/ui/togglebuttongroup';
import { Tooltip } from '@primereact/ui/tooltip';

const items = [
    { value: 'left', label: 'Align left', icon: <AlignLeft /> },
    { value: 'center', label: 'Align center', icon: <AlignCenter /> },
    { value: 'right', label: 'Align right', icon: <AlignRight /> },
    { value: 'justify', label: 'Align justify', icon: <AlignJustify /> }
];

export default function WithToggleButtonDemo() {
    return (
        <div className="flex items-center justify-center">
            <Tooltip.Manager>
                <ToggleButtonGroup allowEmpty={false} defaultValue="left">
                    {items.map((item) => (
                        <Tooltip.Root key={item.value}>
                            <Tooltip.Trigger as={ToggleButton.Root} value={item.value}>
                                <ToggleButton.Indicator>{item.icon}</ToggleButton.Indicator>
                            </Tooltip.Trigger>
                            <Tooltip.Portal>
                                <Tooltip.Positioner sideOffset={8}>
                                    <Tooltip.Popup className="px-2.5 py-1.5">
                                        <Tooltip.Arrow />
                                        <div className="text-sm font-medium">{item.label}</div>
                                    </Tooltip.Popup>
                                </Tooltip.Positioner>
                            </Tooltip.Portal>
                        </Tooltip.Root>
                    ))}
                </ToggleButtonGroup>
            </Tooltip.Manager>
        </div>
    );
}

Sub-Components#

See Primitive API for TooltipManager, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipPositioner, TooltipPopup, TooltipArrow component documentation.

Hooks#

See Headless API for useTooltip, useTooltipManager hook documentation.

Accessibility#

See Tooltip Primitive for WAI-ARIA compliance details and keyboard support.