Tooltip

Material Design 3 plain tooltip web component, built on the native Popover API.

1.6 KB gzipped
@lit-material/tooltip 0.0.3
Renders on the server

Example

Install

npm install @lit-material/tooltip @lit-material/tokens

import "@lit-material/tooltip";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

`<lit-material-tooltip>`

Material Design 3 plain tooltip — a short text label that appears near an anchor element on hover or keyboard focus, built on the native Popover API (popover="manual", so top-layer rendering escapes clipping/overflow ancestors) the same way lit-material-menu and lit-material-snackbar build on it.

Properties

Property	Attribute	Type	Default	Description
`open`	`open`	`boolean`	`false`
`anchor`	`anchor`	`string \| undefined`	none	id of the anchor element to position against and describe. See also `anchorElement`.
`showDelay`	`show-delay`	`number`	`500`	Hover/focus delay (ms) before showing.
`hideDelay`	`hide-delay`	`number`	`200`	Delay (ms) before hiding once the anchor is no longer hovered/focused.
`anchorElement`	property only	`HTMLElement \| undefined`	none	The element this tooltip describes and positions against.

Slots

Slot	Description
default	The tooltip's text.

CSS parts

Part	Description
`tooltip`	The host itself (background, padding, shape).

Source on GitHub npm