Tooltip - Bellhop Design System

Examples

Interactive examples showing different tooltip positions and use cases.

Basic Tooltip

A simple tooltip that appears when hovering over a button. The tooltip displays helpful contextual information.

Text here

chevron_right HTML

<bh-tooltip text="Click to save your changes">
  <bh-button hierarchy="primary" size="md" label="Save"></bh-button>
</bh-tooltip>

chevron_right React

<BhTooltip text="Click to save your changes">
  <BhButton hierarchy="primary" size="md" label="Save" />
</BhTooltip>

chevron_right Angular

<bh-tooltip text="Click to save your changes">
  <bh-button hierarchy="primary" size="md" label="Save"></bh-button>
</bh-tooltip>

Tooltip Positions

Tooltips can be positioned above, below, left, or right of the trigger element using the position attribute.

chevron_right HTML

<bh-tooltip text="Tooltip above" position="top">
  <bh-button hierarchy="secondary" size="md" label="Top"></bh-button>
</bh-tooltip>

<bh-tooltip text="Tooltip below" position="bottom">
  <bh-button hierarchy="secondary" size="md" label="Bottom"></bh-button>
</bh-tooltip>

<bh-tooltip text="Tooltip on left" position="left">
  <bh-button hierarchy="secondary" size="md" label="Left"></bh-button>
</bh-tooltip>

<bh-tooltip text="Tooltip on right" position="right">
  <bh-button hierarchy="secondary" size="md" label="Right"></bh-button>
</bh-tooltip>

chevron_right React

<BhTooltip text="Tooltip above" position="top">
  <BhButton hierarchy="secondary" size="md" label="Top" />
</BhTooltip>

<BhTooltip text="Tooltip below" position="bottom">
  <BhButton hierarchy="secondary" size="md" label="Bottom" />
</BhTooltip>

<BhTooltip text="Tooltip on left" position="left">
  <BhButton hierarchy="secondary" size="md" label="Left" />
</BhTooltip>

<BhTooltip text="Tooltip on right" position="right">
  <BhButton hierarchy="secondary" size="md" label="Right" />
</BhTooltip>

chevron_right Angular

<bh-tooltip text="Tooltip above" position="top">
  <bh-button hierarchy="secondary" size="md" label="Top"></bh-button>
</bh-tooltip>

<bh-tooltip text="Tooltip below" position="bottom">
  <bh-button hierarchy="secondary" size="md" label="Bottom"></bh-button>
</bh-tooltip>

<bh-tooltip text="Tooltip on left" position="left">
  <bh-button hierarchy="secondary" size="md" label="Left"></bh-button>
</bh-tooltip>

<bh-tooltip text="Tooltip on right" position="right">
  <bh-button hierarchy="secondary" size="md" label="Right"></bh-button>
</bh-tooltip>

When to use

Use tooltips to provide additional context, clarification, or helpful information without cluttering the interface.

Icon Buttons

Explain the function of icon-only buttons that lack visible text labels.

Truncated Text

Show the full text when content is truncated with ellipsis due to space constraints.

Additional Context

Provide helpful hints, definitions, or supplementary information about UI elements.

Status Information

Display timestamps, precise values, or detailed status information on hover.

When not to use

For critical information users must see—display it inline
For long explanations—use a popover or help icon with modal
On mobile devices—tooltips require hover which isn't available
For actionable content like buttons or links—use a popover instead

Anatomy

Tooltips consist of a floating container with text and an optional arrow pointing to the trigger element.

Hover me

Trigger Element
The element that shows the tooltip when hovered or focused
Tooltip Container
Floating box with background color and padding containing the tooltip text
Tooltip Text
Brief, helpful text providing additional information
Arrow (Optional)
Visual indicator pointing to the trigger element

Types

Tooltips can be positioned around the trigger element and styled for different contexts.

Top Position

Tooltip appears above the trigger element.

Bottom Position

Tooltip appears above the trigger element.

Left Position

Tooltip appears above the trigger element.

Right Position

Tooltip appears above the trigger element.

Interaction

Tooltips appear and disappear based on user interactions with smooth transitions.

Hover Trigger

Tooltip appears after a short delay when hovering over the trigger element.

Focus Trigger

Tooltip displays when the trigger element receives keyboard focus for accessibility.

Auto Dismiss

Tooltip disappears when the cursor moves away or focus leaves the trigger element.

Smart Positioning

Tooltip automatically repositions to stay within viewport boundaries.

Placement

Tooltips can be used throughout the interface wherever additional context would be helpful.

Icon Buttons

Attach to icon-only buttons in toolbars, navigation bars, and action menus.

Form Fields

Provide help text or format examples for form inputs when space is limited.

Data Tables

Show full text for truncated cell content or provide additional row details.

Charts and Graphs

Display precise values and data points when hovering over chart elements.

Accessibility

Tooltips are designed to be accessible to keyboard users and screen reader users.

Keyboard Support

Tab: Move focus to trigger elements to show tooltips
Escape: Dismiss the tooltip if it remains visible
Tooltips appear on focus and disappear when focus moves away

ARIA Attributes

role="tooltip": Identifies the tooltip element
aria-describedby: Associates the tooltip with its trigger element
Tooltip content is programmatically associated with the trigger

Screen Reader Support

Tooltip text is announced when the trigger receives focus
Content is available to screen readers even when visually hidden
Tooltips do not trap keyboard focus

Best Practices

Keep tooltip text brief and concise (under 100 characters)
Don't put interactive elements inside tooltips
Ensure tooltips don't obscure important content
Use tooltips to supplement, not replace, visible labels

Related Components

Components that provide similar or complementary functionality.

Component	Usage
Popover	Use for richer content that needs more space and interactivity.
Badge	Combine to provide status indicators with explanatory tooltips.
Icon Button	Commonly paired to explain icon meanings on hover.
Modal	Use for longer explanations or help content.

Resources

Design and development resources for the Tooltip component.

Figma

Available

View in Figma →

Web Components/Angular

Available

View in Storybook →

React

Available

View in Storybook →