Basics

Tooltips

Provide supplementary detail on hover or keyboard focus.

Examples

Provide supplementary detail on hover or keyboard focus.

Usage and props

Import shared components from @wafm/ui. Keep workflow state and data fetching in the application.

Tooltip

<Tooltip>
            <TooltipTrigger aria-description="8 participants in this analysis" render={<Button variant="outline" size="sm" />}>
              Hover for detail
            </TooltipTrigger>
            <TooltipContent>8 participants in this analysis</TooltipContent>
          </Tooltip>

TooltipTrigger.render: Render a focusable control. Base UI tooltips are visual hints; provide the same information in an accessible label or description.