HTML CSS
HOW TO CREATE A CUSTOM TOOLTIP WITH HTML CSS
<p> This is a random <i data-tooltip="TIP">TEXT</i> Paragraph. </p>
SET DATA-TOOLTIP IN HTML
01
[data-tooltip]::before { content: attr(data-tooltip); }
TOOLTIP WITH BEFORE PSEUDO
02
[data-tooltip] { position: relative; display: inline-block; }
POSITION THE TOOLTIP
03
[data-tooltip]::before { position: absolute; bottom: 100%; }
SHOW TOOLTIP ON HOVER
04
[data-tooltip]::before { visibility: hidden; }
[data-tooltip]:hover::before { visibility: visible; }
TOOLTIP COSMETICS
05
[data-tooltip]::before { background: red; min-width: 100px; }