Добавить подсказку к элементу div

Чтобы создать базовую подсказку (tooltip), вам нужно использовать следующий код:

<div title="Это моя подсказка"></div>

Для стилизации подсказки вы можете использовать CSS:

.visible {
  height: 3em;
  width: 10em;
  background: yellow;
}

Тогда HTML будет выглядеть так:

<div title="Это моя подсказка" class="visible"></div>

Если вы хотите реализовать более продвинутую версию с использованием JavaScript, вы можете ознакомиться с ресурсом:

https://jqueryhouse.com/best-jquery-tooltip-plugins/

На указанном сайте представлено 25 различных плагинов для подсказок.

Это можно сделать только с помощью CSS, без использования JavaScript совсем.

Рабочий демонстрационный пример

[data-tooltip]::before {
    /* обязательно - не изменяйте */
    content: attr(data-tooltip);
    position: absolute;
    opacity: 0;

    /* настраиваемое */
    transition: all 0.15s ease;
    padding: 10px;
    color: #333;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;
}

[data-tooltip]:hover::before {
    /* обязательно - не изменяйте */
    opacity: 1;

    /* настраиваемое */
    background: yellow;
    margin-top: -50px;
    margin-left: 20px;
}

[data-tooltip]:not([data-tooltip-persistent])::before {
    pointer-events: none;
}

/* ТОЛЬКО ДЛЯ ТЕСТА */
div {
    border: 1px solid silver;
    background: #ddd;
    margin: 20px;
    padding: 10px;
}

<div>Обычный div, здесь нет подсказки</div>

<div data-tooltip="Привет, я подсказка. Довольно просто, правда? ;)">Div с обычной подсказкой. Наведите курсор, чтобы увидеть подсказку.
    <br/>Наведение на подсказку не имеет значения:
    <br/>если вы выйдете за ее пределы, подсказка исчезнет.</div>

<div data-tooltip="Привет, я постоянная подсказка. Я не исчезну при наведении, даже если выйдете за пределы родителя. Я также предотвращу появление других подсказок :)" data-tooltip-persistent="foo">Div с постоянной подсказкой. Наведите курсор, чтобы увидеть подсказку.
    <br/>Подсказка не исчезнет, пока вы не наведете курсор на меня ИЛИ на неё.</div>

Шаги для реализации:

1. Примените атрибут HTML, например data-tooltip="bla bla", к вашему объекту (div или любому другому элементу):

   <div data-tooltip="bla bla">
       что-то здесь
   </div>
   

2. Определите псевдоэлемент ::before для каждого объекта [data-tooltip], чтобы он был прозрачным, абсолютно позиционированным и содержал значение data-tooltip="":

   [data-tooltip]::before {
       position: absolute;
       content: attr(data-tooltip);
       opacity: 0;
   }
   

3. Определите состояние :hover::before для каждого [data-tooltip], чтобы сделать его видимым:

   [data-tooltip]:hover::before {
       opacity: 1;
   }
   

4. Примените ваши стили (цвет, размер, позицию и т. д.) к объекту подсказки; на этом все. В демонстрации я добавил еще одно правило, чтобы указать, должна ли подсказка исчезать при наведении на нее, но вне родительского элемента, с помощью другого пользовательского атрибута data-tooltip-persistent и простого правила:

[data-tooltip]:not([data-tooltip-persistent])::before {
    pointer-events: none;
}

Примечание 1: Поддержка браузерами этой функции очень обширна, но подумайте о добавлении резервного варианта на JavaScript (если необходимо) для старых версий IE.

Примечание 2: Улучшением может быть добавление немного JavaScript для вычисления положения мыши и добавления его к псевдоэлементам, изменяя класс, применяемый к ним.

Вам вовсе не нужен JavaScript для этого; просто установите атрибут title:

<div title="Привет, мир!">
  <label>Имя</label>
  <input type="text"/>
</div>

Обратите внимание, что визуальное представление всплывающей подсказки зависит от браузера и операционной системы, поэтому она может появляться с эффектом затухания, а может и нет. Тем не менее, это семантически правильный способ создания всплывающих подсказок, и он будет корректно работать с программами для обеспечения доступности, такими как программы чтения с экрана.

Пример в Stack Snippets

<div title="Привет, мир!">
  <label>Имя</label>
  <input type="text"/>
</div>

Вот реализация с использованием чистого CSS 3 (с необязательным JS).

Вам просто нужно установить атрибут data-tooltip на любом div, и текст этого атрибута будет отображаться рядом с ним, когда вы наведете курсор мыши.

Я также включил некоторый необязательный JavaScript, который позволяет отображать подсказку рядом с курсором. Если вам не нужна эта функция, вы можете смело игнорировать часть с JavaScript в этом примере.

Если вы не хотите эффекта плавного появления при наведении, просто удалите свойства перехода.

Подсказка оформлена как стандартная подсказка title. Вот пример в JSFiddle: http://jsfiddle.net/toe0hcyn/1/

Пример HTML:

<div data-tooltip="ваше сообщение подсказки"></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;
    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();
    var x = event.clientX - this.getBoundingClientRect().left;
    var y = event.clientY - this.getBoundingClientRect().top;

    // Смещение подсказки ниже курсора.
    y += 10;

    style.innerHTML = '*[data-tooltip]::after { left: ' + x + 'px; top: ' + y + 'px }';
}

Надеюсь, это поможет вам с реализацией подсказок на вашем сайте!

Вот отличный инструмент для создания всплывающих подсказок с использованием jQuery:

https://jqueryui.com/tooltip/

Чтобы реализовать это, просто следуйте этим шагам:

1. Добавьте следующий код в свои теги <head></head>:

   <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>    
   <script type="text/javascript">
   $("[title]").tooltip();
   </script> 
   <style type="text/css"> 
   
   /* Стилизация всплывающей подсказки. По умолчанию элемент для стилизации - это .tooltip */
   .tooltip {
       display:none;
       background:transparent url(https://dl.dropboxusercontent.com/u/25819920/tooltip/black_arrow.png);
       font-size:12px;
       height:70px;
       width:160px;
       padding:25px;
       color:#fff;
   }
   </style> 
   

2. На HTML-элементах, для которых вы хотите добавить всплывающую подсказку, просто добавьте атрибут title. Текст, находящийся в этом атрибуте, будет отображаться в подсказке.

Примечание: Когда JavaScript отключен, будет использовано стандартное всплывающее окно браузера/операционной системы.