Components

Tooltip

Tooltips display a short label or description when the user hovers or focuses on an element.

Stable

Anatomy

import {Tooltip} from '@staffbase/design';

<Tooltip.Root>
  <Tooltip.Trigger />
  <Tooltip.Content />
</Tooltip.Root>

Wraps the tooltip and manages its open state. The provider is included internally, so you don’t need to render Tooltip.Provider yourself.

Name	Type	Description
`children`	`ReactNode`	The element that reveals the tooltip on hover or focus. Passed as a single element, not via a render prop.

Name	Type	Description
`is`	`labeldescriptionvisual-only`	How the tooltip relates to its trigger for assistive technology. Use "label" when the tooltip names the trigger (e.g. an icon button), "description" when it adds supplementary detail, or "visual-only" when the content is already conveyed elsewhere. Default: `description`
`variant`	`defaultinverse`	The visual style of the tooltip surface. Default: `default`
`side`	`topbottomleftrightinline-startinline-end`	Which side of the trigger to position the tooltip against. Default: `top`
`container`	`HTMLElementRefObject<HTMLElement>`	The element the tooltip portal renders into. Use this instead of z-index to control stacking. Defaults to the document body.
`children`	`ReactNode`	The content shown inside the tooltip.