Input
Output
<!DOCTYPE html> <html> <head> <style> .tooltip { position: relative; display: inline-block; cursor: pointer; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: white; text-align: center; border-radius: 5px; padding: 5px; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } </style> </head> <body> <div class="tooltip">Hover over me <div class="tooltiptext">Tooltip message</div> </div> </body> </html>