Tooltips

Tooltips provide auxiliary information regarding the functionality or state of a UI element. Bug On MD3 Expressive tooltips support two variants: Plain for simple labels and Rich for detailed content that can include interactive actions.

Introduction

The MD3 Expressive Tooltip is designed to provide contextual help without cluttering the interface. It supports both brief informative labels and rich content with interactive elements. With spring-based motion and smart positioning, tooltips feel responsive and remain accessible across desktop and mobile devices.

Anatomy

• Anchor: The UI element that triggers the tooltip (e.g., a button or icon).
• Container: The surface holding the tooltip content.
• Caret (Optional): A small arrow pointing from the tooltip to the anchor.
• Title (Rich Variant): A bold heading for the tooltip.
• Body / Content: The primary text or descriptive message.
• Actions (Rich Variant): Optional buttons for users to take further action.

Variants

Plain Tooltips

The most common variant, used for brief labels or descriptions (e.g., labeling an icon-only button).

Rich Tooltips

Used for more complex information. They can include a title, detailed body text, and interactive buttons.

Features

Smart Positioning

The TooltipBox automatically calculates the best position (top, bottom, left, right) based on the anchor's location and available viewport space.

Interaction Triggers

Tooltips can be triggered by:

• Hover: Standard desktop behavior.
• Focus: For keyboard accessibility.
• Long-press: For touch devices.
• Click: Typically for Rich tooltips that require user interaction.

Usage

Basic Plain Tooltip

import { TooltipBox, PlainTooltip, Button, Icon } from "@bug-on/m3-expressive";

<TooltipBox tooltip={<PlainTooltip>Send Message</PlainTooltip>}>
  <Button icon={<Icon name="send" />} />
</TooltipBox>

Rich Tooltip with Actions

<TooltipBox
  tooltip={
    <RichTooltip
      title="Permissions Required"
      action={<Button colorStyle="text">Settings</Button>}
    >
      Please enable camera access in your system settings.
    </RichTooltip>
  }
>
  <Button>Take Photo</Button>
</TooltipBox>

Best Practices

Do

• Use tooltips for icon-only buttons.
• Keep tooltip text brief and helpful.
• Use Rich tooltips for information that requires context or further action.
• Ensure tooltips don't obscure critical information.

Don't

• Don't use tooltips to display essential information that should be always visible.
• Don't use tooltips for large amounts of text; use a Dialog or a dedicated help page instead.
• Avoid putting too many interactive elements inside a Rich tooltip.

Accessibility

• Roles: Automatically applies role="tooltip".
• Linking: Links the anchor to the tooltip via aria-describedby.
• Keyboard: Fully accessible via focus. Esc key dismisses the tooltip.
• Motion: Respects prefers-reduced-motion settings.

API Reference

TooltipBox

The wrapper that handles positioning and triggers.

PlainTooltip

RichTooltip