Lenso UI

Foundation component · Overlays

Tooltip

Compact contextual help for controls, with optional shortcut guidance.

Live playground

Choose Tooltip when

  • Use concise supporting text; never place essential actions inside a tooltip.
  • Add a shortcut only when it helps users repeat the trigger action.

Accessibility

  • Base UI exposes the tooltip on both pointer hover and keyboard focus.
  • Escape dismisses it without moving focus away from the trigger.

Implementation

A themed portal with collision-aware positioning and an 8px target offset.

import { Tooltip } from "@lenso/ui/tooltip";

<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger render={<button type="button" />}>Help</Tooltip.Trigger>
    <Tooltip.Portal>
      <Tooltip.Positioner>
        <Tooltip.Popup>
          Help with <Tooltip.Shortcut>?</Tooltip.Shortcut>
        </Tooltip.Popup>
      </Tooltip.Positioner>
    </Tooltip.Portal>
  </Tooltip.Root>
</Tooltip.Provider>;
Lenso UI