Tooltips are a great way to provide additional information to your website visitors without cluttering your page. They are essentially small pop-up boxes that appear when the user hovers over or clicks on a specific element. In this tutorial, we will go through the steps to create tooltips using HTML and CSS.
<!DOCTYPE html> <html> <style> .tooltip-text{ text-align: center; } .tooltip { position: relative; } .tooltip::before { content: attr(title); display: inline-block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); opacity: 0; padding: 10px; background-color: #333; color: #fff; border-radius: 5px; font-size: 12px; font-weight: normal; transition: opacity 0.3s ease; width: 100%; } .tooltip:hover::before { opacity: 1; } </style> <body> <div class="tooltip-text"> <h2>Tooltip</h2> <button class="tooltip" title="This is a Tooltip">Hover Over Me</button> </div> </body> </html>
In the above example, we have added a “tooltip” class to the button element. When the user hovers over the button, the tooltip will appear with the text from the “title” attribute styled according to the CSS rules we defined.
Output: