Tooltip

Show a short explanation on hover or keyboard focus.

Live preview Try the effect

Try the controls to understand this pattern.

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Show a short explanation on hover or keyboard focus. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Clarifying icon buttons and concise supplementary hints.

Related concepts

A tooltip contains no interactive controls and must not hold essential information.

Describe this effect

Output language

Show a brief tooltip on hover and keyboard focus, associate it with its trigger and dismiss it when focus or hover leaves.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.