ComponentsShipped

Popover

Floating paper anchored to a trigger: hairline, --r-md, the one shadow. The glossary term is its shipped instance.

Show code

<div class="pop-anchor">
  <button class="btn btn-ghost" data-pop aria-expanded="false" aria-controls="pop-1">What is --tint?</button>
  <div class="pop" id="pop-1" role="dialog" aria-label="About --tint" hidden><b>--tint · #939393</b>Never used solid. Translucent marks are struck from it, so they stay a tint over any surface.</div>
</div>

Click to open, not hover - a popover can hold a sentence worth reading and must survive a touch. For a two-word label on hover, use a Tooltip.