EN
HTML - display tooltip text for link element on mouse hover
0
points
In this article, we would like to show you how to
Practical example
To create a tooltip for link (a element) we take the following steps:
- create a new style for
tooltipclass insideaelement (using.selector), - set the
tooltipto be invisible at the start usingvisibility: hidden, - for the container (in our case
aelement) use the:hoverpseudo-class withvisibility: visibleproperty inside to show up thetooltiptext when you hover it.
// ONLINE-RUNNER:browser;
<!DOCTYPE html>
<html>
<style>
a {
position: relative;
display: inline-block;
}
a .tooltip {
visibility: hidden;
width: 120px;
background: gray;
color: white;
text-align: center;
border-radius: 3px;
padding: 5px 0;
/* tooltip positioning */
position: absolute;
z-index: 1;
margin-left: 5px;
}
a:hover .tooltip {
visibility: visible;
}
</style>
<body>
<a href="https://www.dirask.com/">Hover over me to see the tooltip
<span class="tooltip">Tooltip text...</span>
</a>
</body>
</html>