tooltip

children
Not required
node
label
Required
node/string
position
Not required
func
(triggerRect, tooltipRect) => { if (!triggerRect || !tooltipRect) { return { left: 0, top: 0 } } const triggerCenter = triggerRect.left + triggerRect.width / 2 const left = triggerCenter - tooltipRect.width / 2 const maxLeft = window.innerWidth - tooltipRect.width - 2 return { left: Math.min(Math.max(2, left), maxLeft) + window.scrollX, top: triggerRect.bottom + 8 + window.scrollY } }
showArrow
Not required
bool
true

Tooltips are used to annotate, but are not the main attraction in a UI. Tooltips can provide additional help context, but shouldn't include critical information. When using tooltips, the best approach is to assume that the tooltip content will never be read.

  • Tooltips should utilize minimal content.
  • No critical information should be included within a tooltip
  • If there needs to be any interactivity, please use a dialog.

Positions

The tooltip component includes two built-in positioning functions: bottom and top. The default is bottom.

Arrow

The tooltip includes an optional arrow that points to the trigger element. You can disable it by setting showArrow={false}:

Labels

You can pass a string or React node as the label. This allows for custom styling on the tooltip.

Resources on tooltip usage