Signal Tooltip

A three-tone tooltip cluster with clear semantic accents and an elastic, accessible reveal.

About this tool

A tooltip trio in which three compact controls share one neutral visual system, while graphite, information-blue and alert-red signals identify each message. Edit the copy, geometry, palette and timing; inspect the open state, use every tooltip by keyboard or touch, and export one self-contained HTML file. Based on jarsaniya_1588's design on Uiverse, used under the MIT License.

In collections: Tooltip CSS Examples & UI Design Micro Interactions: UI Animation Examples

Guide: Tailwind Tooltip: Accessible CSS, Popover API and React

UI/UX · HTML / CSS / JS All tools

Copy

Default label

Default tooltip

Info label

Info tooltip

Alert label

Alert tooltip

Layout

Scale %

Button width px

Button height px

Palette

Trigger surface

Trigger text

Tooltip surface

Tooltip text

Default accent

Info accent

Alert accent

Type

Button type px

Tooltip type px

Weight

400 500 600

Motion

Reveal duration ms

Reveal distance px

Hover lift px

Preview

State

auto open

Stage

Stage colour

#ffffff