Tooltip

A short label that appears when the pointer rests on something. Use it to supplement a control that shows only an icon.

import { Button, Tooltip } from 'neba';

<Tooltip content="Copy the deploy URL">
  <Button variant="outline" startIcon={<LinkIcon />} />
</Tooltip>;

Props

Prop	Type	Default	Description
content *	ReactNode	—	What it says. A short phrase: a tooltip cannot be reached by touch and nothing inside it can be clicked
children *	ReactElement	—	The single element it hangs off. The trigger merges onto it rather than wrapping it, so the layout gains no element
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'sm'	The plate's type scale and padding
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'secondary'	Colour family. A tooltip is always a note about something else, so the neutral family is the honest default
densityshared	'default' | 'compact'	'default'	Padding only
side	'top' | 'right' | 'bottom' | 'left'	'top'	Which edge of the trigger it appears on. Flips to the opposite side when there is no room
align	'start' | 'center' | 'end'	'center'	Where it sits along that edge
sideOffset	number	6	Distance from the trigger, in pixels
delay	number	600	How long the pointer has to rest before it opens, in ms
closeDelay	number	0	How long it waits before closing, in ms
arrow	boolean	true	The little wedge pointing at the trigger
open	boolean	—	Whether it is open. With onOpenChange
defaultOpen	boolean	false	The initial state of an uncontrolled tooltip
onOpenChange	(open: boolean) => void	—	Called when it opens or closes
disabled	boolean	false	Stops it opening without disabling the trigger: for the tooltip that only exists while a label is truncated

Native <div> attributes pass through to the popup. Only color, content and children are excluded, since the table above spells them differently.

The trigger merges onto children rather than rendering a box of its own, so the tooltip costs the layout nothing. children must be a single element that accepts a ref and spreads props: every Neba component does.

Examples

side and align

side is where the popup sits relative to the trigger; align is its alignment along that axis. The side flips automatically when there is no room at the window edge. sideOffset sets the gap and arrow draws a pointer.

import { Button, Tooltip, type NebaSide } from 'neba';

const SIDES: NebaSide[] = ['top', 'right', 'bottom', 'left'];

export default function TooltipSides() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {SIDES.map((side) => (
        <Tooltip key={side} side={side} delay={0} content={`Placed on the ${side}`}>
          <Button variant="outline" color="secondary">
            {side}
          </Button>
        </Tooltip>
      ))}
    </div>
  );
}

delay and TooltipProvider

delay is how long the pointer must rest before opening; closeDelay is how long the tooltip stays after it leaves.

Wrapping tooltips in a TooltipProvider makes them share the delay: once one has opened, its neighbours open instantly, and the delay comes back after a pause. That way a row of icon buttons does not make you wait at every stop.

import { Button, ButtonGroup, Tooltip, TooltipProvider } from 'neba';

function BoldIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path
        d="M5 3h4a2.5 2.5 0 0 1 0 5H5zm0 5h4.5a2.5 2.5 0 0 1 0 5H5z"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function ItalicIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path
        d="M10 3H6.5m3 10H6m3.5-10L7 13"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </svg>
  );
}

function UnderlineIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path
        d="M4.5 3v4.5a3.5 3.5 0 0 0 7 0V3M4 13.5h8"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </svg>
  );
}

/**
 * One delay shared across the row: once any of these has opened, its
 * neighbours open instantly, and the wait comes back after a pause.
 */
export default function TooltipGrouped() {
  return (
    <TooltipProvider delay={400}>
      <ButtonGroup variant="outline" color="secondary">
        <Tooltip content="Bold">
          <Button startIcon={<BoldIcon />} />
        </Tooltip>
        <Tooltip content="Italic">
          <Button startIcon={<ItalicIcon />} />
        </Tooltip>
        <Tooltip content="Underline">
          <Button startIcon={<UnderlineIcon />} />
        </Tooltip>
      </ButtonGroup>
    </TooltipProvider>
  );
}

Accessibility

• The popup carries role="tooltip", and the trigger gets aria-describedby pointing at it only while it is open.
• A tooltip is a description, never a name. Give an icon-only button its own aria-label.
• It opens on keyboard focus but not on focus that arrived from a click, and closes on Escape.
• On a touch screen it cannot be reached by pointer, and anything clickable inside it cannot be clicked. Use a popover if you need either.