A-Tooltip Web Component

A custom element for displaying a tooltip: Github Repo

README

Tests

Demo

Attributes
CSS Properties
Tooltip Title This is the tooptip message.

Examples

Tooltip Title The tooltip message

Tooltip with title and message

A tooltip title.

Tooltip with only a title

A tooltip message.

Tooltip with only a message

! The tooltip message.

Tooltip with custom icon

Using text as the tootip trigger

A Text Trigger The tooptip message.

Using text as the tootip trigger (no icon)

A Text Trigger The tooptip message.

Using an svg element as the icon

The tooltip message. <img src="star.svg"> (svg fill ignores --icon-color)

The tooltip message <svg>...</svg> (svg fill inherits --icon color)

... The message.

Using a-tooltip-group

a-tooltip-group groups several a-tooltip elements which share common attributes. This allows you to set attributes on a single parent element (a-tooltip-group) which all child a-tooltip elements will inherit. Explicit attributes set on any child a-tooltip will be honored.

Tooltip!
Tooltip!
Tooltip!

Using a-tooltip as a simple lightbox

Taming of the Bull from the Labors of Heracles
Reconstruction of the Taming of the Bull metope on the ancient Temple of Zeus in Olympia Greece.