Nordstar

Tooltip

A small floating label that explains an element when the user hovers or focuses it.

When to use

  • To clarify an icon-only Button or a terse control.
  • To surface a keyboard shortcut or a short, supplementary hint.

When not to use

  • For essential information — tooltips are hidden by default and unavailable on touch.
  • For interactive content (links, buttons, forms) — use a popover or dialog instead.

Installation

pnpm add @nordcom/nordstar-tooltip
import { Tooltip } from '@nordcom/nordstar';

Basic usage

Mount Tooltip.Provider once (near the root of your app, or around a section) to share open/close timing, then compose a Tooltip with a Tooltip.Trigger and Tooltip.Content. Use asChild to make any element the trigger.

'use client';

import { Button, Tooltip } from '@nordcom/nordstar';

export default function Example() {
    return (
        <Tooltip.Provider>
            <Tooltip>
                <Tooltip.Trigger asChild>
                    <Button variant="outline">Hover me</Button>
                </Tooltip.Trigger>
                <Tooltip.Content>Your changes save automatically.</Tooltip.Content>
            </Tooltip>
        </Tooltip.Provider>
    );
}

Sides

Position the bubble with side on the content. Radix flips it automatically when it would overflow the viewport.

side="top" and side="right"
'use client';

import { Button, Tooltip } from '@nordcom/nordstar';

export default function Example() {
    return (
        <Tooltip.Provider>
            <div className="flex gap-4">
                <Tooltip>
                    <Tooltip.Trigger asChild>
                        <Button variant="outline">Top</Button>
                    </Tooltip.Trigger>
                    <Tooltip.Content side="top">Above the trigger</Tooltip.Content>
                </Tooltip>
                <Tooltip>
                    <Tooltip.Trigger asChild>
                        <Button variant="outline">Right</Button>
                    </Tooltip.Trigger>
                    <Tooltip.Content side="right">Beside the trigger</Tooltip.Content>
                </Tooltip>
            </div>
        </Tooltip.Provider>
    );
}

Props

PropTypeDefaultDescription
childrenstring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode> | null | undefined——
defaultOpenboolean | undefined——
delayDurationnumber | undefined700The duration from when the pointer enters the trigger until the tooltip gets opened. This will override the prop with the same name passed to Provider.
disableHoverableContentboolean | undefinedfalseWhen `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.
onOpenChange((open: boolean) => void) | undefined——
openboolean | undefined——

Accessibility

  • Built on @radix-ui/react-tooltip: the trigger is wired to the content via aria-describedby automatically.
  • The trigger must be focusable — use a real <button> or pass asChild to a focusable element like Button.
  • Dismiss-on-Escape and pointer-leave are handled for you.

Related