?
Integer pulvinar nisi ipsum, eu interdum sem auctor non. Nullam euismod, sem et tincidunt pellentesque, leo erat sagittis tortor, nec eleifend mauris ipsum ac orci.
<div class="tooltip">
?
<span class="tooltiptext"> Integer pulvinar nisi ipsum, eu interdum sem auctor non. Nullam euismod, sem et tincidunt pellentesque, leo erat sagittis tortor, nec eleifend mauris ipsum ac orci.</span>
</div>
/* TOOLTIP */
.tooltip {
position: relative;
display: inline-block;
cursor:help;
font-size:40px;
font-weight:bold;}
.tooltip .tooltiptext {
visibility: hidden;
font-size:12px;
font-weight:500;
width: 250px;
box-shadow: 1px 1px 15px #00000050;
background-color: white;
color: black;
padding: 15px;
position: absolute;
z-index: 1;
bottom: 120%;
left: 50%;
margin-left: -100px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 35%;
margin-left: -5px;
border-width: 10px;
border-style: solid;
border-color: white transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/* or by adding the class with jquery instead, see snippet below */
.tooltip .tooltiptext.visible {
visibility: visible;
}
/* END TOOLTIP */
jQuery(function($) {
$('.something').hover(function(){
$('.tooltiptext').toggleClass('visible');
});
});