Tooltip

A hover-triggered floating label powered by Popper. Accepts plain text or rich React content and supports all 12 Popper placement options.

Overview

Tooltip wraps Popper with hover and focus event handling, a styled bubble shell, and an anchorEl render prop pattern. Unlike a raw Popper, you don't manage open state — Tooltip tracks mouseenter/mouseleave and focus/blur events itself.

Pass a function to anchorEl that receives triggerProps (event handlers, tabIndex, and aria-describedby) and spreads them onto whatever element you want to trigger the tooltip.

Import

import { Tooltip } from '@unflow.io/ui/components/Tooltip';

Props

Prop	Type	Default	Description
`anchorEl`	`(triggerProps: TooltipTriggerProps) => ReactNode`	required	Render prop that returns the trigger element
`content`	`ReactNode`	—	Content shown inside the tooltip
`placement`	`Placement`	`'top'`	Position relative to anchor (12 Popper options)
`offset`	`number`	`10`	Gap between anchor and tooltip in px
`persistOnHover`	`boolean`	`false`	Keep tooltip open when hovering over the tooltip itself

All standard HTMLDivElement props are forwarded to the tooltip container.

Default

<Tooltip
  content="This is a tooltip"
  placement="top"
  offset={8}
  persistOnHover
  anchorEl={(triggerProps) => (
    <button
      {...triggerProps}
      className="rounded-md border border-grey-300 px-3 py-1.5 text-sm"
    >
      Hover me
    </button>
  )}
/>

Rich content

<Tooltip
  placement="bottom"
  offset={10}
  persistOnHover
  className="p-3"
  content={
    <div className="flex w-56 flex-col gap-2">
      <p className="text-sm font-semibold">Custom tooltip</p>
      <p className="text-xs text-grey-400">
        Tooltips can contain rich content — text, images, or any React node.
      </p>
    </div>
  }
  anchorEl={(triggerProps) => (
    <button {...triggerProps} className="rounded-md border border-grey-300 px-3 py-1.5 text-sm">
      Rich content
    </button>
  )}
/>

Pass any React node to content — text, icons, or a full layout. Use className to override the default bubble padding when building a custom layout.

Placements

<Tooltip content="top"    placement="top"    anchorEl={...} />
<Tooltip content="bottom" placement="bottom" anchorEl={...} />
<Tooltip content="left"   placement="left"   anchorEl={...} />
<Tooltip content="right"  placement="right"  anchorEl={...} />

All 12 @floating-ui placements are accepted: top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end.

Accessibility

anchorEl provides aria-describedby linking the trigger to the tooltip content — screen readers announce the tooltip when the trigger is focused.
Keyboard users can reach the tooltip via Tab focus; Escape closes it via the onKeyDown handler in triggerProps.
tabIndex is included in triggerProps — spread it on non-focusable elements to make them keyboard reachable.