Home > Article > Web Front-end > Fade in tooltips using CSS animation
Fade in tooltips using CSS animation
- WBOYforward
- 2023-09-10 16:13:021281browse
To fade in the tooltip text using CSS, you can try running the following code:
Example
Live Demo
<!DOCTYPE html>
<html>
<style>
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: blue;
color: #fff;
z-index: 1;
top: -5px;
right: 110%;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
opacity: 0;
transition: opacity 1s;
}
.mytooltip {
position: relative;
display: inline-block;
margin-left: 150px;
}
.mytooltip .mytext:after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 6px;
border-style: solid;
border-color: transparent transparent transparent blue;
}
.mytooltip:hover .mytext {
visibility: visible;
opacity: 1;
}
</style>
<body>
<div class = "mytooltip">Keep mouse cursor over me
<span class = "mytext"> My Tooltip text</span>
</div>
</body>
</html>The above is the detailed content of Fade in tooltips using CSS animation. For more information, please follow other related articles on the PHP Chinese website!
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete