Вот реализация чистого CSS 3 (с дополнительным JS)
Единственное, что вам нужно сделать, это установить атрибут для любого элемента div, называемого «data-tooltip», и этот текст будет отображаться рядом с ним, когда вы наводите курсор на него.
Я включил дополнительный JavaScript, который будет вызывать всплывающую подсказку рядом с курсором. Если вам не нужна эта функция, вы можете спокойно игнорировать часть JavaScript этой скрипки.
Если вы не хотите постепенного появления состояния при наведении, просто удалите свойства перехода .
Он похож на подсказку свойства title. Вот JSFiddle: http://jsfiddle.net/toe0hcyn/1/
HTML Пример:
<div data-tooltip="your tooltip message"></div>
CSS:
*[data-tooltip] {
position: relative;
}
*[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
top: -20px;
right: -20px;
width: 150px;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
display: block;
font-size: 12px;
line-height: 16px;
background: #fefdcd;
padding: 2px 2px;
border: 1px solid #c0c0c0;
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
}
*[data-tooltip]:hover::after {
opacity: 1;
}
Необязательный JavaScript для изменения местоположения всплывающей подсказки мыши:
var style = document.createElement('style');
document.head.appendChild(style);
var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++) {
var attr = allElements[i].getAttribute('data-tooltip');
if (attr) {
allElements[i].addEventListener('mouseover', hoverEvent);
}
}
function hoverEvent(event) {
event.preventDefault();
x = event.x - this.offsetLeft;
y = event.y - this.offsetTop;
// Make it hang below the cursor a bit.
y += 10;
style.innerHTML = '*[data-tooltip]::after { left: ' + x + 'px; top: ' + y + 'px }'
}