Feedback

Tooltip

A short text hint that appears while a control is hovered or focused.

Class name	Type	Description
`tooltipplf:tooltip`	Component	Wraps the trigger
`tooltip-contentplf:tooltip-content`	Part	The floating text

Default

<span class="tooltip" data-plf-tooltip>
  <button class="btn btn-outline">Hover</button>
  <span class="tooltip-content" hidden>Add to library</span>
</span>

<span class="plf:tooltip" data-plf-tooltip>
  <button class="plf:btn plf:btn-outline">Hover</button>
  <span class="plf:tooltip-content" hidden>Add to library</span>
</span>

import { buttonClass, Tooltip, TooltipContent, TooltipTrigger } from '@pelatform/react';

export function Example() {
  return (
    <Tooltip>
      <TooltipTrigger className={buttonClass({ variant: 'outline' })}>Hover</TooltipTrigger>
      <TooltipContent>Add to library</TooltipContent>
    </Tooltip>
  );
}

import { buttonClass, Tooltip, TooltipContent, TooltipTrigger } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Tooltip>
      <TooltipTrigger className={buttonClass({ variant: 'outline' })}>Hover</TooltipTrigger>
      <TooltipContent>Add to library</TooltipContent>
    </Tooltip>
  );
}

Touch does not open tooltips and the content cannot hold links or controls, so use a Popover for interactive content.

Placement

<span class="tooltip" data-plf-tooltip>
  <button class="btn btn-outline">Top</button>
  <span class="tooltip-content" hidden>Tooltip on top</span>
</span>
<span class="tooltip" data-plf-tooltip data-plf-placement="right">
  <button class="btn btn-outline">Right</button>
  <span class="tooltip-content" hidden>Tooltip on the right</span>
</span>
<span class="tooltip" data-plf-tooltip data-plf-placement="bottom">
  <button class="btn btn-outline">Bottom</button>
  <span class="tooltip-content" hidden>Tooltip at the bottom</span>
</span>
<span class="tooltip" data-plf-tooltip data-plf-placement="left">
  <button class="btn btn-outline">Left</button>
  <span class="tooltip-content" hidden>Tooltip on the left</span>
</span>
<span class="tooltip" data-plf-tooltip data-plf-align="start">
  <button class="btn btn-outline">Top start</button>
  <span class="tooltip-content" hidden>Aligned to the start of the button</span>
</span>
<span class="tooltip" data-plf-tooltip data-plf-align="end">
  <button class="btn btn-outline">Top end</button>
  <span class="tooltip-content" hidden>Aligned to the end of the button</span>
</span>

<span class="plf:tooltip" data-plf-tooltip>
  <button class="plf:btn plf:btn-outline">Top</button>
  <span class="plf:tooltip-content" hidden>Tooltip on top</span>
</span>
<span class="plf:tooltip" data-plf-tooltip data-plf-placement="right">
  <button class="plf:btn plf:btn-outline">Right</button>
  <span class="plf:tooltip-content" hidden>Tooltip on the right</span>
</span>
<span class="plf:tooltip" data-plf-tooltip data-plf-placement="bottom">
  <button class="plf:btn plf:btn-outline">Bottom</button>
  <span class="plf:tooltip-content" hidden>Tooltip at the bottom</span>
</span>
<span class="plf:tooltip" data-plf-tooltip data-plf-placement="left">
  <button class="plf:btn plf:btn-outline">Left</button>
  <span class="plf:tooltip-content" hidden>Tooltip on the left</span>
</span>
<span class="plf:tooltip" data-plf-tooltip data-plf-align="start">
  <button class="plf:btn plf:btn-outline">Top start</button>
  <span class="plf:tooltip-content" hidden>Aligned to the start of the button</span>
</span>
<span class="plf:tooltip" data-plf-tooltip data-plf-align="end">
  <button class="plf:btn plf:btn-outline">Top end</button>
  <span class="plf:tooltip-content" hidden>Aligned to the end of the button</span>
</span>

import { buttonClass, Tooltip, TooltipContent, TooltipTrigger } from '@pelatform/react';

export function Example() {
  return (
    <>
      <Tooltip>
        <TooltipTrigger className={buttonClass({ variant: 'outline' })}>Top</TooltipTrigger>
        <TooltipContent>Tooltip on top</TooltipContent>
      </Tooltip>
      <Tooltip placement="right">
        <TooltipTrigger className={buttonClass({ variant: 'outline' })}>Right</TooltipTrigger>
        <TooltipContent>Tooltip on the right</TooltipContent>
      </Tooltip>
      <Tooltip placement="bottom">
        <TooltipTrigger className={buttonClass({ variant: 'outline' })}>Bottom</TooltipTrigger>
        <TooltipContent>Tooltip at the bottom</TooltipContent>
      </Tooltip>
      <Tooltip placement="left">
        <TooltipTrigger className={buttonClass({ variant: 'outline' })}>Left</TooltipTrigger>
        <TooltipContent>Tooltip on the left</TooltipContent>
      </Tooltip>
      <Tooltip align="start">
        <TooltipTrigger className={buttonClass({ variant: 'outline' })}>Top start</TooltipTrigger>
        <TooltipContent>Aligned to the start of the button</TooltipContent>
      </Tooltip>
      <Tooltip align="end">
        <TooltipTrigger className={buttonClass({ variant: 'outline' })}>Top end</TooltipTrigger>
        <TooltipContent>Aligned to the end of the button</TooltipContent>
      </Tooltip>
    </>
  );
}

import { buttonClass, Tooltip, TooltipContent, TooltipTrigger } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <Tooltip>
        <TooltipTrigger className={buttonClass({ variant: 'outline' })}>Top</TooltipTrigger>
        <TooltipContent>Tooltip on top</TooltipContent>
      </Tooltip>
      <Tooltip placement="right">
        <TooltipTrigger className={buttonClass({ variant: 'outline' })}>Right</TooltipTrigger>
        <TooltipContent>Tooltip on the right</TooltipContent>
      </Tooltip>
      <Tooltip placement="bottom">
        <TooltipTrigger className={buttonClass({ variant: 'outline' })}>Bottom</TooltipTrigger>
        <TooltipContent>Tooltip at the bottom</TooltipContent>
      </Tooltip>
      <Tooltip placement="left">
        <TooltipTrigger className={buttonClass({ variant: 'outline' })}>Left</TooltipTrigger>
        <TooltipContent>Tooltip on the left</TooltipContent>
      </Tooltip>
      <Tooltip align="start">
        <TooltipTrigger className={buttonClass({ variant: 'outline' })}>Top start</TooltipTrigger>
        <TooltipContent>Aligned to the start of the button</TooltipContent>
      </Tooltip>
      <Tooltip align="end">
        <TooltipTrigger className={buttonClass({ variant: 'outline' })}>Top end</TooltipTrigger>
        <TooltipContent>Aligned to the end of the button</TooltipContent>
      </Tooltip>
    </>
  );
}

Tooltip needs JavaScript. The Full script (pelatform-ui.min.js) starts every component on page load, with no code of your own; with ESM imports, call init() yourself, as in Installation. For markup you add later, see Dynamic content.

<link rel="stylesheet" href="pelatform-ui.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.min.css">
<link rel="stylesheet" href="components/button.min.css">
<link rel="stylesheet" href="components/tooltip.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/tooltip.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

<link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script>

<link rel="stylesheet" href="core/pelatform-ui-core.prefixed.min.css">
<link rel="stylesheet" href="components/button.prefixed.min.css">
<link rel="stylesheet" href="components/tooltip.prefixed.min.css">
<script src="core/pelatform-ui-core.min.js" defer></script>
<script src="components/tooltip.min.js" defer></script>
<script>document.addEventListener('DOMContentLoaded', () => PLF.init());</script>

Hooks

Attribute	Purpose
`data-plf-tooltip`	Marks the wrapper
`data-plf-tooltip-trigger`	Optional: marks the trigger, otherwise the wrapper’s direct child without `hidden`: a button, link, form field or element with `tabindex`; `disabled` or `aria-disabled="true"` turns the tooltip off. The script adds the text to its `aria-describedby` unless the text only repeats the trigger’s name, so an icon-only trigger still needs an `aria-label`
`data-plf-tooltip-content`	Optional: marks the text, otherwise the wrapper’s direct child with `hidden`; no interactive content
`data-plf-placement`	`top` (default), `right`, `bottom` or `left`
`data-plf-align`	`start`, `center` (default) or `end`

Methods

Method	Behavior
`PLF.Tooltip.getOrCreateInstance(element)`	Returns the instance, creating it for valid markup
`PLF.Tooltip.getInstance(element)`	Returns the instance or `null`
`instance.open()`	Shows the tooltip; returns `false` when already open, canceled, disabled or dismissed
`instance.close()`	Hides the tooltip; returns `false` when already hidden or canceled
`instance.destroy()`	Hides it without events and removes listeners

Events

Event	When
`plf:tooltip:before-open`	Before showing; cancelable
`plf:tooltip:open`	After showing
`plf:tooltip:before-close`	Before hiding; cancelable
`plf:tooltip:close`	After hiding

Each event’s detail:

Property	Value
`instance`	The Tooltip instance
`reason`	`api`, `trigger` for the pointer or `keyboard` for focus and Escape
`trigger`	The trigger when hover or focus starts or ends, otherwise `null`

Keyboard

Key	Action
Tab, Shift+Tab	Focusing the trigger shows the tooltip; leaving it hides the tooltip
Escape	Hides the tooltip; focus stays on the trigger

React

Tooltip from @pelatform/react renders this wrapper around its trigger and text, which shows on hover and focus as the script’s does; it keeps its own state, or the application sets it with open.

Prop	Values	Default
`placement`	`top`, `right`, `bottom`, `left`	`top`
`align`	`start`, `center`, `end`	`center`
`open`	`true` or `false`, which the application changes in `onOpenChange`	Its own state
`defaultOpen`	`true` starts shown when the application does not set `open`	`false`
`onOpenChange`	`(open, reason)`, called when the text shows or hides: `trigger` for the pointer or a press, `keyboard` for the focus or Escape	None

The parts:

Part	Element
`TooltipTrigger`	A `button` with `type="button"`, which the text describes unless it repeats the button’s name; `buttonClass()` gives it a look
`TooltipContent`	A `span` with `tooltip-content` and `role="tooltip"`, holding text only

Other props are the element’s own, className and ref included.

CSS variables

Variable	Default
`--plf-tooltip-max-width`	`20rem`, capped by the viewport
`--plf-tooltip-radius`	Large radius
`--plf-tooltip-bg`	`--plf-color-text`, an inverted fill
`--plf-tooltip-color`	`--plf-color-surface`