Tooltip Small pop-up element that provides additional information when users hover or focus on an element.

Note:
This is a pure CSS alternative to something like Tippy.js. We HIGHLY recommend you use a proper positioning library so the tooltip never appears outside the viewport. Sadly, vanilla CSS cannot do this... YET!

CSS Source

Controls

Text As always, keep it simple.

Position Tooltip position.

Top Bottom Left Right

Open Test open/close animation with built-in reduce motion. Notice how the animation changes bases on the position.

Embed HTML Embed fancy HTML.

Properties Jump to heading

Class / Token	Type
`.prs-tooltip`	Component	For actionable item, use [data-tip="BLAH"] to house the tooltip content
`.prs-tooltip-content`	Component	Optional content container, use if you need to embed HTML