.tooltip { border-radius: 3px; background:#999; color:#fff; cursor: help; font-size:9px; display:inline; opacity:1; }
.tooltip::after {
font-size:11px;
background: rgba(0, 0, 0, 0.8);
border-radius: 0px 8px 8px 8px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
color: #FFF;
content: attr(data-tooltip);
margin-top: 24px;
opacity: 0;
padding: 7px 14px;
position: absolute;
visibility: hidden;
max-width:220px;
line-height:12px;
transition: all 0.4s ease-in-out;
}
.tooltip:hover::after {
font-size:11px;
opacity: 1;
visibility: visible;
}
Пример результата: