Creating a Tooltip Using CSS hover effect
This approach utilizes CSS hover effect properties to create the tooltip. Here We will create a hidden element that becomes visible when the user hovers over an element. The visibility and opacity properties are used to show and hide the tooltip.
Example: The below code practically implements CSS hover effect to create a custom tooltip for an element.
HTML
<!DOCTYPE html><html><head> <title> Link Tooltip Example </title> <style> .tooltip { position: relative; display: inline-block; text-align: center; margin: 20px; padding: 10px; border: 1px solid green; border-radius: 5px; } .tooltip a { color: green; text-decoration: none; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; } .tooltip:hover{ background-color: green; } .tooltip:hover a { color: #fff; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } </style></head><body style="text-align: center;"> <h1 style="color: green; text-align: center;"> GeekforGeeks </h1> <h2> Creating custom tooltip using CSS </h2> <div class="cont" style="text-align: center;"> <div class="tooltip"> <a href="#" class="link"> GeekforGeeks </a> <span class="tooltiptext"> Visit GeekforGeeks </span> </div> <div class="tooltip"> <a href="#" class="link"> Microsoft </a> <span class="tooltiptext"> Visit Microsoft </span> </div> <div class="tooltip"> <a href="#" class="link"> Apple </a> <span class="tooltiptext"> Visit Apple </span> </div> </div></body></html> |
Output:
What is a Tooltip in HTML ?
A tooltip in HTML is a small pop-up box or text that appears when a user hovers over an element such as a button, link, or image. Tooltips are often used to provide additional information about the element or to give context to the user.
We can create a tooltip using the below methods:
Table of Content
- Using the title attribute
- Using CSS hover effect
- Using pseudo-elements