Tooltip

A short description that appears when its trigger is hovered or focused. Use it to name icon-only buttons, not for information editors need to do their work.

Tooltip.tsx

import {Tooltip, TooltipContent, TooltipTrigger} from 'alinea/components'
import {IcRoundOpenInNew} from 'alinea/dashboard/icons'

export function TooltipExample() {
  return (
    <Tooltip>
      <TooltipTrigger
        variant="outline"
        size="icon"
        icon={IcRoundOpenInNew}
        aria-label="Open preview"
      />
      <TooltipContent>Open preview in a new tab</TooltipContent>
    </Tooltip>
  )
}

Placement

side sets where the tooltip opens, it flips to the other side when there is no room.

TooltipSides.tsx

import {Tooltip, TooltipContent, TooltipTrigger} from 'alinea/components'

const sides = ['top', 'right', 'bottom', 'left'] as const

export function TooltipSidesExample() {
  return (
    <>
      {sides.map(side => (
        <Tooltip key={side} delayDuration={0}>
          <TooltipTrigger variant="outline">{side}</TooltipTrigger>
          <TooltipContent side={side}>Shown on the {side}</TooltipContent>
        </Tooltip>
      ))}
    </>
  )
}

Props

`<Tooltip>`

Shows a short description when the trigger is hovered or focused

PropTypeDefaultDescription

delayDurationnumberDefault –Milliseconds the pointer rests on the trigger before the tooltip opens

closeDelaynumberDefault –Milliseconds before the tooltip closes once the pointer leaves

disabledbooleanDefault –

openbooleanDefault –

defaultOpenbooleanDefault –

onOpenChange(open: boolean) => voidDefault –

`<TooltipTrigger>`

The element the tooltip describes. By default this is a Button, with asChild the focusable child is used instead.

Accepts every prop of Button.

`<TooltipContent>`

PropTypeDefaultDescription

idstringDefault –

sideSideDefault 'top'

alignAlignDefault –

sideOffsetnumberDefault 12

alignOffsetnumberDefault –

Also accepts className and style and data-* attributes.

Accessibility

The tooltip describes its trigger with aria-describedby. It opens on keyboard focus as well as on hover and closes with Escape. An icon-only trigger still needs an aria-label.