← →

Tooltip

Tooltip is a native web component that wraps a trigger element and shows a short supporting text when the user hovers over it or focuses it with the keyboard. Use it to describe icons, abbreviate labels, or add extra context without taking up permanent space in the interface.

Preview

<pura-tooltip text="Save changes">
  <pura-button>Save</pura-button>
</pura-tooltip>

<pura-tooltip text="Delete item" placement="bottom">
  <pura-button variant="ghost">Delete</pura-button>
</pura-tooltip>

<pura-tooltip text="More information" placement="right">
  <span aria-label="help" style="cursor:help;">?</span>
</pura-tooltip>

Attributes

Attribute	Type	Default	Description
`text`	string	""	Text shown inside the hint.
`placement`	"top" \| "bottom" \| "left" \| "right"	top	Position of the hint relative to the trigger.

Installation

pura is copy-paste and dependency-free. Load the whole library, or just this component.

HTML

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/tooltip.js"></script>

JavaScript

import "./pura/lib/tooltip.js";

Slots

default