HTML CSS
(quick & simple example)
<p> This is a random <i data-tooltip="TIP">TEXT</i> Paragraph. </p>
[data-tooltip]::before { content: attr(data-tooltip); }
[data-tooltip] { position: relative; display: inline-block; }
[data-tooltip]::before { position: absolute; bottom: 100%; }
[data-tooltip]::before { visibility: hidden; }
[data-tooltip]:hover::before { visibility: visible; }
[data-tooltip]::before { background: red; min-width: 100px; }