FREE CSS COMPONENT
Tooltip
Tooltips should supplement visible UI, not carry essential instructions or error messages.
Live preview
Copy component⧉
HTML
<button type="button" aria-describedby="tip">Copy</button> <span id="tip" role="tooltip">Copy component</span>
CSS
.demo-tooltip{position:relative;display:inline-block}.demo-tooltip small{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:7px 10px;border-radius:4px;white-space:nowrap;font:11px Inter,sans-serif}.demo-tooltip span{display:block;padding:10px 14px;background:#111;color:#fff;border-radius:5px}