Tooltip

Introduction

The Tooltip component provides contextual information when users interact with an element. It supports multiple positioning options, themes, and can be triggered by hover, focus, or touch.

When to Use

To provide additional context or explanation for interface elements
To show full text when content is truncated
To display keyboard shortcuts or hints
To explain icon-only buttons or controls

Key Features

Flexible Positioning: Four positions available - top (default), bottom, left, or right
Customizable Delays: Configure open and close delays independently
Multiple Themes: Dark and light themes available
Accessible: Full keyboard navigation and screen reader support
Touch Support: Works on mobile devices with tap interactions
Auto-positioning: Automatically adjusts position to stay within viewport

Anatomy

<div class="pm7-tooltip">
  <div class="pm7-tooltip-trigger">
    <!-- Trigger element -->
  </div>
  <div class="pm7-tooltip-content" data-side="top">
    <!-- Tooltip content -->
    <div class="pm7-tooltip-arrow"></div>
  </div>
</div>

Basic Tooltip

Positioning

Sizes

Themes

With Delay

Multiline Content

Icon Tooltips

Installation

npm install @pm7/core

CSS Classes

Class	Description
`.pm7-tooltip`	Base tooltip container
`.pm7-tooltip-trigger`	Element that triggers the tooltip
`.pm7-tooltip-content`	Tooltip content container
`.pm7-tooltip-arrow`	Arrow pointing to trigger
Size Modifiers
`.pm7-tooltip-content--sm`	Small tooltip size
`.pm7-tooltip-content--lg`	Large tooltip size
Theme Variants
`.pm7-tooltip-content--light`	Light theme variant
Content Modifiers
`.pm7-tooltip-content--multiline`	Multiline content support

Data Attributes

Attribute	Type	Default	Description
`data-side`	string	top	Position of tooltip: top (default), bottom, left, right
`data-align`	string	center	Alignment: start, center, end (only works for top/bottom positions)
`data-delay`	number	0	Delay before showing/hiding (ms)
`data-open-delay`	number	0	Specific open delay (ms)
`data-close-delay`	number	0	Delay before hiding (ms)

Basic Usage

<div class="pm7-tooltip">
  <button class="pm7-button pm7-tooltip-trigger">
    Hover for tooltip
  </button>
  <div class="pm7-tooltip-content" data-side="top">
    Tooltip content
    <div class="pm7-tooltip-arrow"></div>
  </div>
</div>

Positioning

Note: PM7 Tooltip supports 4 positions: top (default), bottom, left, and right. The data-align attribute only works for top and bottom positions.

<!-- Top position (default) -->
<div class="pm7-tooltip">
  <button class="pm7-tooltip-trigger">Top</button>
  <div class="pm7-tooltip-content" data-side="top">
    Tooltip appears above
    <div class="pm7-tooltip-arrow"></div>
  </div>
</div>

<!-- Right position -->
<div class="pm7-tooltip">
  <button class="pm7-tooltip-trigger">Right</button>
  <div class="pm7-tooltip-content" data-side="right">
    Tooltip appears to the right
    <div class="pm7-tooltip-arrow"></div>
  </div>
</div>

<!-- Bottom position -->
<div class="pm7-tooltip">
  <button class="pm7-tooltip-trigger">Bottom</button>
  <div class="pm7-tooltip-content" data-side="bottom">
    Tooltip appears below
    <div class="pm7-tooltip-arrow"></div>
  </div>
</div>

<!-- Left position -->
<div class="pm7-tooltip">
  <button class="pm7-tooltip-trigger">Left</button>
  <div class="pm7-tooltip-content" data-side="left">
    Tooltip appears to the left
    <div class="pm7-tooltip-arrow"></div>
  </div>
</div>

<!-- Top with alignment (only works for top/bottom) -->
<div class="pm7-tooltip">
  <button class="pm7-tooltip-trigger">Top Start</button>
  <div class="pm7-tooltip-content" data-side="top" data-align="start">
    Aligned to start
    <div class="pm7-tooltip-arrow"></div>
  </div>
</div>

Sizes

<!-- Small size -->
<div class="pm7-tooltip">
  <button class="pm7-tooltip-trigger">Small</button>
  <div class="pm7-tooltip-content pm7-tooltip-content--sm" data-side="top">
    Compact tooltip
    <div class="pm7-tooltip-arrow"></div>
  </div>
</div>

<!-- Default size -->
<div class="pm7-tooltip">
  <button class="pm7-tooltip-trigger">Default</button>
  <div class="pm7-tooltip-content" data-side="top">
    Regular tooltip content
    <div class="pm7-tooltip-arrow"></div>
  </div>
</div>

<!-- Large size -->
<div class="pm7-tooltip">
  <button class="pm7-tooltip-trigger">Large</button>
  <div class="pm7-tooltip-content pm7-tooltip-content--lg" data-side="top">
    Larger tooltip with more content space
    <div class="pm7-tooltip-arrow"></div>
  </div>
</div>

Themes

<!-- Dark theme (default) -->
<div class="pm7-tooltip">
  <button class="pm7-tooltip-trigger">Dark</button>
  <div class="pm7-tooltip-content" data-side="top">
    Dark tooltip
    <div class="pm7-tooltip-arrow"></div>
  </div>
</div>

<!-- Light theme -->
<div class="pm7-tooltip">
  <button class="pm7-tooltip-trigger">Light</button>
  <div class="pm7-tooltip-content pm7-tooltip-content--light" data-side="top">
    Light themed tooltip
    <div class="pm7-tooltip-arrow"></div>
  </div>
</div>

With Delays

<!-- Open delay -->
<div class="pm7-tooltip" data-open-delay="500">
  <button class="pm7-tooltip-trigger">Delayed open</button>
  <div class="pm7-tooltip-content" data-side="top">
    Opens after 500ms
    <div class="pm7-tooltip-arrow"></div>
  </div>
</div>

<!-- Close delay -->
<div class="pm7-tooltip" data-close-delay="300">
  <button class="pm7-tooltip-trigger">Delayed close</button>
  <div class="pm7-tooltip-content" data-side="top">
    Stays open for 300ms after mouse leave
    <div class="pm7-tooltip-arrow"></div>
  </div>
</div>

Multiline Content

<div class="pm7-tooltip">
  <button class="pm7-tooltip-trigger">Info</button>
  <div class="pm7-tooltip-content pm7-tooltip-content--multiline" data-side="top" style="max-width: 250px;">
    This tooltip contains multiple lines of text.<br><br>
    It can include formatted content and maintains readability.
    <div class="pm7-tooltip-arrow"></div>
  </div>
</div>

JavaScript API

import { PM7Tooltip } from '@pm7/core';

// Initialize a tooltip
const element = document.querySelector('.pm7-tooltip');
const tooltip = new PM7Tooltip(element);

// Show tooltip programmatically
tooltip.show();

// Hide tooltip
tooltip.hide();

// Update position
tooltip.updatePosition();

// Destroy tooltip instance
tooltip.destroy();

// Listen for tooltip events
element.addEventListener('pm7:tooltip:show', (event) => {
  console.log('Tooltip shown', event.detail.tooltip);
});

element.addEventListener('pm7:tooltip:hide', (event) => {
  console.log('Tooltip hidden', event.detail.tooltip);
});

React Usage

import { Tooltip } from '@pm7/react';

function App() {
  return (
    <Tooltip content="This is a tooltip">
      <button>Hover me</button>
    </Tooltip>
  );
}

Accessibility

Tooltips are announced to screen readers using ARIA live regions
Keyboard accessible - shows on focus, hides on blur
Escape key closes the tooltip
Uses aria-describedby to associate tooltip with trigger
Touch devices show tooltip on tap

Copy this link that can be used as documentation for working with this component:

https://raw.githubusercontent.com/patrickmast/pm7-ui/main/packages/core/src/components/tooltip/README.md

🤖 AI-Optimized Documentation

This link contains complete Markdown documentation that is perfectly readable by AI assistants, developers, and other automated systems. Directly accessible on GitHub - including all essential PM7 Tooltip implementation guidance.

Perfect for ChatGPT, Claude, and other AI code assistants