<div class="row mt-100">
<div class="col-xl-6">
<div class="card o-visible">
<div class="card-header">
<h5 class="text-center">Animated tooltip</h5>
</div>
<div class="card-block">
<p class="text-center mt-10">
<span class="mytooltip tooltip-effect-5">
<span class="tooltip-item">Hover ME</span>
<span class="tooltip-content clearfix">
<span class="tooltip-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
</span>
</span>
to get the tooltip</p>
</div>
</div>
</div>
</div>
body {
background-color: #C5CAE9
}
.mt-100 {
margin-top: 150px;
margin-left: 350px
}
.mt-10 {
margin-top: 10px
}
h5 {
color: #fff
}
.mytooltip {
display: inline;
position: relative;
z-index: 999
}
.card-header {
background-color: red
}
.mytooltip .tooltip-item {
background: rgba(0, 0, 0, 0.1);
cursor: pointer;
display: inline-block;
font-weight: 500;
padding: 0 10px
}
.mytooltip .tooltip-content {
position: absolute;
z-index: 9999;
width: 360px;
left: 50%;
margin: 0 0 20px -180px;
bottom: 100%;
text-align: left;
font-size: 14px;
line-height: 30px;
-webkit-box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
box-shadow: -5px -5px 15px rgba(48, 54, 61, 0.2);
background: #2b2b2b;
opacity: 0;
cursor: default;
pointer-events: none
}
.mytooltip .tooltip-content::after {
content: '';
top: 100%;
left: 50%;
border: solid transparent;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: #2a3035 transparent transparent;
border-width: 10px;
margin-left: -10px
}
.mytooltip:hover .tooltip-item::after {
pointer-events: auto
}
.mytooltip:hover .tooltip-content {
pointer-events: auto;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg);
transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg)
}
.mytooltip .tooltip-text {
font-size: 14px;
line-height: 24px;
display: block;
padding: 1.31em 1.21em 1.21em 0;
color: #fff
}
.tooltip-effect-5 .tooltip-text {
padding: 1.4em
}
.tooltip-effect-5 .tooltip-content {
width: 180px;
margin-left: -90px;
-webkit-transform-origin: 50% calc(106%);
transform-origin: 50% calc(106%);
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, -webkit-transform 0.2s;
transition: opacity 0.2s, transform 0.2s;
transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s;
-webkit-transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39);
transition-timing-function: ease, cubic-bezier(0.17, 0.67, 0.4, 1.39)
}