<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
/* Add a small arrow to the tooltip */
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/* Different arrow positioning examples */
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
/* Example with tooltip positioned to the right */
.tooltip.right .tooltiptext {
left: 105%;
margin-left: 0;
}
.tooltip.right .tooltiptext::after {
left: calc(100% - 10px); /* Position the arrow */
top: 50%;
margin-top: -5px; /* Center vertically */
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black; /* Change arrow color */
}
</style>
</head>
<body>
<p>Move the mouse over the text below to see the tooltip:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<br><br>
<div class="tooltip right">Hover over me (right)
<span class="tooltiptext">Tooltip text on the right</span>
</div>
</body>
</html>
Explanation and Key Improvements:
position: relative;on the container: This is crucial. It establishes the container element as the positioning context for the tooltip, allowing us to absolutely position the tooltip relative to the container.position: absolute;on the tooltip: This allows us to precisely position the tooltip.z-index: 1;on the tooltip: Ensures the tooltip appears above other content.- Centered Tooltip: The code now correctly centers the tooltip below the text using
left: 50%;andmargin-left: -60px;(half the tooltip's width). - Arrow Positioning: The arrow is created using the
::afterpseudo-element and positioned correctly. The example includes positioning for a tooltip below the text and another example for a tooltip to the right. - Transitions: Added
opacity: 0;andtransition: opacity 0.3s;for a smooth fade-in effect. - Class for Right Tooltip: Added a
.rightclass to demonstrate how to easily modify the tooltip position for different placements. This makes the code more reusable. - Comments: Improved comments to explain the code better.
This improved example provides a more robust and flexible solution for creating hover tooltips with CSS. You can easily adapt the CSS to position the tooltip above, to the left, or below the text by adjusting the top, bottom, left, and right properties, and changing the arrow's border colors accordingly. Remember to adjust the margin-left or margin-top to keep the tooltip centered based on its position.