<div class="tooltip-container">
Hover Me !
<span class="tooltip">Praesent ut tincidunt ligula. Donec at sem sit amet nulla porttitor consequat sit amet quis velit. Phasellus imperdiet mi in velit gravida tincidunt.</span>
</div>
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 400;
src: local('Muli'), url(http://themes.googleusercontent.com/static/fonts/muli/v4/kU4XYdV4jtS72BIidPtqyw.woff) format('woff');
}
body {
width:120px;
margin: 150px auto;
background: #D76655;
font: 400 12px/14px 'Muli';
}
.tooltip-container {
cursor: pointer;
position: relative;
display: inline-block;
}
.tooltip {
opacity: 0;
z-index: 99;
color: #bbb;
width: 190px;
display: block;
font-size: 11px;
padding: 5px 10px;
border-radius: 3px;
text-align: center;
text-shadow: 1px 1px 2px #111;
background: rgba(51,51,51,0.9);
border: 1px solid rgba(34,34,34,0.9);
box-shadow: 0 0 3px rgba(0,0,0,0.5);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
position: absolute;
right: -80px;
bottom: 40px;
}
.tooltip:before,.tooltip:after {
content: '';
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(51,51,51,0.9);
position: absolute;
bottom: -10px;
left: 43%;
}
.tooltip-container:hover .tooltip,a:hover .tooltip {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
// Very simple tooltips using CSS3 component.
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.