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;  }