Tooltip

In Development

This component is currently in development. The API is not yet stable and may change in future releases.

Overview

Tooltip provides a brief, informative message that appears when a user hovers over or focuses on an element. Follows WAI-ARIA tooltip pattern with role="tooltip".

Usage

HTML

<button aria-describedby="tip-1">Hover me</button>
<div id="tip-1" role="tooltip" class="pm-tooltip pm-tooltip--top">
  Helpful description
</div>

React

import { Tooltip } from "@paramanu/overlays-react"

<Tooltip placement="top">Helpful description</Tooltip>

Guidelines

• Keep tooltip content short (1-2 sentences max)
• Never put essential information in tooltips
• Use aria-describedby to associate the tooltip with its trigger
• Tooltips should not contain interactive content

API

Prop	Type	Default	Description
placement	TooltipPlacement	"top"	Position relative to the trigger