Today’s this article will be based on making a Tooltips Smooth Animation with HTML CSS” we can call it.
Namaste
Tooltips Smooth Animation with HTML CSS Demo
Tooltips Smooth Animation with HTML CSS Source Code
Below code should be put between the <body> Your Code Here </body> tags.
.html file code
<!-- Main Container -->
<div class="con">
<!-- Left Tooltip -->
<div class="con-tooltips left">
<p>Left</p>
<div class="tooltips">
<p>Left</p>
</div>
</div>
<!-- Top Tooltip -->
<div class="con-tooltips top">
<p>Top</p>
<div class="tooltips">
<p>Top</p>
</div>
<!-- Bottom Tooltip -->
</div>
<div class="con-tooltips bottom">
<p>Bottom</p>
<div class="tooltips">
<p>Bottom</p>
</div>
</div>
<!-- Right Tooltips -->
<div class="con-tooltips right">
<p>Right</p>
<div class="tooltips">
<p>Right</p>
</div>
</div>
</div>Put this code inside <style> Your Code Here <style>tags or into style.css file
.css file code
/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
/* Start Body */
body {
margin: 0;
padding: 0;
font-size: 16px;
font-family: "Poppins", sans-serif;
box-sizing: border-box;
color: #444;
background-color: #EEE;
text-align: center;
}
/* Main Container CSS */
.con {
position: absolute;
top: 20%;
bottom: 20%;
left: 20%;
right: 20%;
align-items: center;
justify-content: center;
display: flex;
}
/* Tooltips Box */
.con-tooltips {
position: relative;
background: #3378ff;
border-radius: 10px;
color: #fff;
padding: 0 20px;
margin: 10px;
display: inline-block;
transition: all 0.3s ease-in-out;
cursor: default;
}
/* Tooltip */
.tooltips {
visibility: hidden;
z-index: 1;
opacity: .40;
width: 100%;
padding: 0 20px;
background: #ff6800;
color: #ffff;
position: absolute;
top: -140%;
left: -25%;
border-radius: 10px;
font: 16px;
transform: translateY(9px);
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px #ff6800;
}
/* Tooltips After */
.tooltips::after {
content: " ";
width: 0;
height: 0;
border-style: solid;
border-radius: 10px;
border-width: 12px 12.5px 0 12.5px;
border-color: #ff6800 transparent transparent transparent;
position: absolute;
left: 40%;
}
.con-tooltips:hover .tooltips {
visibility: visible;
transform: translateY(-10px);
opacity: 1;
transition-timing-function: 0.3s linear;
animation: popup 1s ease-in-out infinite alternate;
}
@keyframes popup {
0% {
transform: translateY(6px);
}
100% {
transform: translateY(1px);
}
}
/* Hover Tooltips */
.left:hover {
transform: translateX(-6px);
}
.top:hover {
transform: translateY(-6px);
}
.bottom:hover {
transform: translateY(6px);
}
.right:hover {
transform: translateX(-6px);
}
/* Left */
.left .tooltips {
top: -20%;
left: -170%;
}
.left .tooltips::after {
top: 40%;
left: 90%;
transform: rotate(-90deg);
}
/* Bottom */
.bottom .tooltips {
top: 115%;
left: -20%;
}
.bottom .tooltips::after {
top: -17%;
left: 40%;
transform: rotate(180deg);
}
/* Bottom */
.right .tooltips {
top: -20%;
left: 115%;
}
.right .tooltips::after {
top: 40%;
left: -12%;
transform: rotate(90deg);
}
