Usage

import { Button, Tooltip, TooltipTrigger } from "@opengovsg/oui"

<TooltipTrigger>
  <Button>Hover me</Button>
  <Tooltip>This is a tooltip</Tooltip>
</TooltipTrigger>

OUI exports 2 tooltip-related components:

• TooltipTrigger: Wraps a trigger element and a Tooltip. Handles showing and hiding the tooltip on hover, focus, and keyboard interactions.
• Tooltip: The tooltip overlay that displays the content.

Note: Tooltips are not shown on touch screen interactions. Ensure that your UI is usable without tooltips, or use an alternative component such as a Popover to show information in an adjacent element.

Examples

Placement

Use the placement prop on Tooltip to control the position of the tooltip relative to its trigger. Supported values include top, bottom, start, end, and their combinations (e.g., top start, bottom end).

Defaults to top.

Without Arrow

Set showArrow={false} to hide the arrow indicator on the tooltip.

Offset

Use the offset prop to control the distance between the tooltip and the trigger element. The default offset is 10.

Controlled

You can control the tooltip's open state using the isOpen and onOpenChange props on TooltipTrigger.

Slots

• base: The main container of the tooltip.
• arrow: The arrow indicator pointing to the trigger element.

Custom Styles

You can customize the Tooltip component by passing custom Tailwind CSS classes to the component slots via the classNames prop.

Accessibility

• Tooltip is shown on hover and keyboard focus of the trigger element.
• Tooltips have a warmup delay (300ms) before appearing. Once a tooltip is shown, subsequent tooltips in the same group appear instantly.
• Content outside the tooltip is not blocked — tooltips are non-modal.
• The trigger element must have a proper ARIA role or use a semantic HTML element (e.g., <button>) so that screen readers can announce the tooltip.
• Press the Esc key to dismiss the tooltip.

Props

Tooltip

TooltipTrigger