Tooltip

Displays brief, informative text when a user hovers over or focuses on an element.

First release: 1.0.0 Latest update: July 1, 2025 Current version: 1.0.0

React

Angular

Vue

Svelte

HTML

Import

import { PlusTooltip } from '@plusui/react';

import { PlusTooltipComponent } from '@plusui/angular';

import { PlusTooltip } from '@plusui/vue';

import PlusTooltip from '@plusui/svelte';

<script src="https://cdn.jsdelivr.net/npm/@plusui/core"></script>

Package

@plusui/react

@plusui/angular

@plusui/vue

@plusui/svelte

@plusui/core

Usage

<PlusTooltip />

<plus-tooltip />

<plus-tooltip />

<PlusTooltip />

<plus-tooltip />

Docs

Changelog

Tooltip Changelog

Recent changes and updates for the tooltip component

v1.0.0

June 20, 2025

Feat

Added Tooltip component for contextual help

Multiple positioning options
Custom content support
Hover and focus triggers
Accessibility with ARIA attributes

The Tooltip component provides brief informational text that appears when a user interacts (hovers, focuses, or clicks) with a target element. It’s commonly used for clarifying icons, providing context, or displaying truncated text.

Anatomy

Usage

Basic Example

A simple tooltip triggered by hovering over a button.

Save

Show code

import { PlusTooltip, PlusButton } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusTooltip message="This button saves your work.">
        <PlusButton ariaLabel="Save">
          <p>
            Save
          </p>
        </PlusButton>
      </PlusTooltip>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-tooltip message="This button saves your work.">
      <plus-button aria-label="Save">
        <p>
          Save
        </p>
      </plus-button>
    </plus-tooltip>
  `
})
export class ExampleComponent {}

<template>
  <plus-tooltip message="This button saves your work.">
    <plus-button aria-label="Save">
      <p>
        Save
      </p>
    </plus-button>
  </plus-tooltip>
</template>

<plus-tooltip message="This button saves your work.">
  <plus-button aria-label="Save">
    <p>
      Save
    </p>
  </plus-button>
</plus-tooltip>

<plus-tooltip message="This button saves your work.">
  <plus-button aria-label="Save">
    <p>
      Save
    </p>
  </plus-button>
</plus-tooltip>

Orientation

Use the orientation prop to control where the tooltip appears relative to the trigger element.

Top

Bottom

Left

Right

Show code

import { PlusTooltip, PlusButton } from '@plusui/react';

export default () => {
  return (
    <>
      <div className="flex flex-wrap gap-4 justify-center">
        <PlusTooltip orientation="top" message="Top Tooltip">
          <PlusButton>
            Top
          </PlusButton>
        </PlusTooltip>
        <PlusTooltip orientation="bottom" message="Bottom Tooltip">
          <PlusButton>
            Bottom
          </PlusButton>
        </PlusTooltip>
        <PlusTooltip orientation="left" message="Left Tooltip">
          <PlusButton>
            Left
          </PlusButton>
        </PlusTooltip>
        <PlusTooltip orientation="right" message="Right Tooltip">
          <PlusButton>
            Right
          </PlusButton>
        </PlusTooltip>
      </div>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div class="flex flex-wrap gap-4 justify-center">
      <plus-tooltip orientation="top" message="Top Tooltip">
        <plus-button>
          Top
        </plus-button>
      </plus-tooltip>
      <plus-tooltip orientation="bottom" message="Bottom Tooltip">
        <plus-button>
          Bottom
        </plus-button>
      </plus-tooltip>
      <plus-tooltip orientation="left" message="Left Tooltip">
        <plus-button>
          Left
        </plus-button>
      </plus-tooltip>
      <plus-tooltip orientation="right" message="Right Tooltip">
        <plus-button>
          Right
        </plus-button>
      </plus-tooltip>
    </div>
  `
})
export class ExampleComponent {}

<template>
  <div class="flex flex-wrap gap-4 justify-center">
    <plus-tooltip orientation="top" message="Top Tooltip">
      <plus-button>
        Top
      </plus-button>
    </plus-tooltip>
    <plus-tooltip orientation="bottom" message="Bottom Tooltip">
      <plus-button>
        Bottom
      </plus-button>
    </plus-tooltip>
    <plus-tooltip orientation="left" message="Left Tooltip">
      <plus-button>
        Left
      </plus-button>
    </plus-tooltip>
    <plus-tooltip orientation="right" message="Right Tooltip">
      <plus-button>
        Right
      </plus-button>
    </plus-tooltip>
  </div>
</template>

<div class="flex flex-wrap gap-4 justify-center">
  <plus-tooltip orientation="top" message="Top Tooltip">
    <plus-button>
      Top
    </plus-button>
  </plus-tooltip>
  <plus-tooltip orientation="bottom" message="Bottom Tooltip">
    <plus-button>
      Bottom
    </plus-button>
  </plus-tooltip>
  <plus-tooltip orientation="left" message="Left Tooltip">
    <plus-button>
      Left
    </plus-button>
  </plus-tooltip>
  <plus-tooltip orientation="right" message="Right Tooltip">
    <plus-button>
      Right
    </plus-button>
  </plus-tooltip>
</div>

<div class="flex flex-wrap gap-4 justify-center">
  <plus-tooltip orientation="top" message="Top Tooltip">
    <plus-button>
      Top
    </plus-button>
  </plus-tooltip>
  <plus-tooltip orientation="bottom" message="Bottom Tooltip">
    <plus-button>
      Bottom
    </plus-button>
  </plus-tooltip>
  <plus-tooltip orientation="left" message="Left Tooltip">
    <plus-button>
      Left
    </plus-button>
  </plus-tooltip>
  <plus-tooltip orientation="right" message="Right Tooltip">
    <plus-button>
      Right
    </plus-button>
  </plus-tooltip>
</div>

Trigger

The trigger prop determines how the tooltip is opened.

Hover Me

Click Me

Show code

import { PlusTooltip, PlusButton } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusTooltip trigger="hover" message="Opens on hover (default)">
        <PlusButton>
          Hover Me
        </PlusButton>
      </PlusTooltip>
      <PlusTooltip trigger="click" message="Opens on click">
        <PlusButton>
          Click Me
        </PlusButton>
      </PlusTooltip>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-tooltip trigger="hover" message="Opens on hover (default)">
      <plus-button>
        Hover Me
      </plus-button>
    </plus-tooltip>
    <plus-tooltip trigger="click" message="Opens on click">
      <plus-button>
        Click Me
      </plus-button>
    </plus-tooltip>
  `
})
export class ExampleComponent {}

<template>
  <plus-tooltip trigger="hover" message="Opens on hover (default)">
    <plus-button>
      Hover Me
    </plus-button>
  </plus-tooltip>
  <plus-tooltip trigger="click" message="Opens on click">
    <plus-button>
      Click Me
    </plus-button>
  </plus-tooltip>
</template>

<plus-tooltip trigger="hover" message="Opens on hover (default)">
  <plus-button>
    Hover Me
  </plus-button>
</plus-tooltip>
<plus-tooltip trigger="click" message="Opens on click">
  <plus-button>
    Click Me
  </plus-button>
</plus-tooltip>

<plus-tooltip trigger="hover" message="Opens on hover (default)">
  <plus-button>
    Hover Me
  </plus-button>
</plus-tooltip>
<plus-tooltip trigger="click" message="Opens on click">
  <plus-button>
    Click Me
  </plus-button>
</plus-tooltip>

Size

Control the tooltip size with the size prop.

Small

Medium

Large

Show code

import { PlusTooltip, PlusButton } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusTooltip size="sm" message="Small tooltip">
        <PlusButton>
          Small
        </PlusButton>
      </PlusTooltip>
      <PlusTooltip size="md" message="Medium tooltip (default)">
        <PlusButton>
          Medium
        </PlusButton>
      </PlusTooltip>
      <PlusTooltip size="lg" message="Large tooltip">
        <PlusButton>
          Large
        </PlusButton>
      </PlusTooltip>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-tooltip size="sm" message="Small tooltip">
      <plus-button>
        Small
      </plus-button>
    </plus-tooltip>
    <plus-tooltip size="md" message="Medium tooltip (default)">
      <plus-button>
        Medium
      </plus-button>
    </plus-tooltip>
    <plus-tooltip size="lg" message="Large tooltip">
      <plus-button>
        Large
      </plus-button>
    </plus-tooltip>
  `
})
export class ExampleComponent {}

<template>
  <plus-tooltip size="sm" message="Small tooltip">
    <plus-button>
      Small
    </plus-button>
  </plus-tooltip>
  <plus-tooltip size="md" message="Medium tooltip (default)">
    <plus-button>
      Medium
    </plus-button>
  </plus-tooltip>
  <plus-tooltip size="lg" message="Large tooltip">
    <plus-button>
      Large
    </plus-button>
  </plus-tooltip>
</template>

<plus-tooltip size="sm" message="Small tooltip">
  <plus-button>
    Small
  </plus-button>
</plus-tooltip>
<plus-tooltip size="md" message="Medium tooltip (default)">
  <plus-button>
    Medium
  </plus-button>
</plus-tooltip>
<plus-tooltip size="lg" message="Large tooltip">
  <plus-button>
    Large
  </plus-button>
</plus-tooltip>

<plus-tooltip size="sm" message="Small tooltip">
  <plus-button>
    Small
  </plus-button>
</plus-tooltip>
<plus-tooltip size="md" message="Medium tooltip (default)">
  <plus-button>
    Medium
  </plus-button>
</plus-tooltip>
<plus-tooltip size="lg" message="Large tooltip">
  <plus-button>
    Large
  </plus-button>
</plus-tooltip>

Visual Sections

Layout & Spacing

Light & Dark Mode

Keyboard Behavior:
- When the trigger element receives focus (via Tab), the tooltip appears if the trigger is hover (or click if already clicked).
- When focus moves away from the trigger, the tooltip hides.
- If trigger is click, Escape key hides the tooltip when it is visible.
Screen Reader:
- The component uses role="tooltip" on the tooltip container.
- The trigger element should have aria-describedby pointing to the id of the tooltip container (this is handled automatically by the component setting aria-describedby="tooltip-content" on the trigger).
- The tooltip content (message prop) provides the accessible description.
Required Developer Actions:
- Ensure the trigger element (passed into the default slot) is inherently focusable (like a button or input) or has tabindex="0".
- Provide a clear and concise message for the tooltip content.
- If the trigger element is icon-only or lacks descriptive text, provide an aria-label on the trigger element itself for screen reader users (e.g., <plus-button aria-label="Save">).

API Reference

Properties

Name	Type	Default	Description	Required
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the tooltip panel.	No
`message`	`string`	`''`	The text content displayed inside the tooltip.	No
`trigger`	`'hover' \| 'click'`	`'hover'`	How the tooltip is opened (hover or click).	No
`orientation`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Position relative to the trigger element.	No
`hideDelay`	`number`	`0`	Delay in milliseconds before hiding the tooltip on hover out.	No

Events

Name	Payload Type	Description
`plus-tooltip-show`	`CustomEvent<void>`	Fired when the tooltip is shown.
`plus-tooltip-hide`	`CustomEvent<void>`	Fired when the tooltip is hidden.

Slots

Name	Description
`(default)`	The target element that triggers the tooltip.

CSS Shadow Parts

Name	Description
`tooltip`	The main tooltip container element.
`arrow`	The arrow element pointing to the trigger.

Join the Community

Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.

Figma GitHub Discord Twitter Open Collective

Tooltip

Import

Package

Usage

Docs

Changelog

Tooltip Changelog

v1.0.0

Added Tooltip component for contextual help

Anatomy

Usage

Basic Example

Orientation

Trigger

Size

Visual Sections

Layout & Spacing

Light & Dark Mode

Accessibility (a11y)

API Reference

Properties

Events

Slots

CSS Shadow Parts

Join the Community