JSFiddle - React, Tailwind, and code Playground
HTML
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div class="separator"></div>
<div id="PerformanceYearTooltip" class="tooltip-info down">
<div class=" text-danger"><b>Please select Performance Year</b></div>
</div>
CSS
.tooltip-info {
border: 1px solid #67a5ca;
padding: 10px 20px;
background-color: #d7e8ef;
border-radius: 1px;
position: fixed;
margin-left:65px;
z-index: 1;
max-width: 800px;
animation: bounce 2s linear 2;
-webkit-animation: bounce 2s linear 2;
-moz-animation: bounce 2s linear 2;
-o-animation: bounce 2s linear 2;
}
.tooltip-info:after, .tooltip-info:before {
content: '';
position: fixed;
height: 0;
width: 0;
border: solid transparent;
top: 100%;
left: 50%;
}
.tooltip-info:after {
border-top-color: #d7e8ef;
border-width: 17px;
margin-left: -17px;
}
.tooltip-info:before {
border-top-color: #67a5ca;
border-width: 19px;
margin-left: -19px;
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
}
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
}
}
@-o-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-o-transform: translateY(0);
}
40% {
-o-transform: translateY(-30px);
}
60% {
-o-transform: translateY(-15px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}