Title

CSS and/or jQuery Tooltip

description

Simple CSS tooltip with some styling

Published 2022-09-06

Modified 2022-09-06

content

? 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');
        });
});
				
			

Sources & References