Как добавить подсказку к элементу span?

пользовательские подсказки с чистым CSS-не требуется JavaScript:

пример (с кодом)/ полноэкранный пример

в качестве альтернативы по умолчанию title attribute tooltips, вы можете сделать свои собственные пользовательские подсказки CSS с помощью :before/:afterпсевдо элементами и HTML5 data-* атрибуты.

используя предоставленный CSS, вы можете добавить подсказку к элементу с помощью data-tooltip атрибут.

вы также можете управлять положением пользовательской подсказки с помощью (допустимые значения: top/right/bottom/left).

например, ниже будет добавлена панель инструментов, расположенная в нижней части элемента span.

<span data-tooltip="Custom tooltip text." data-tooltip-position="bottom">Custom bottom tooltip.</span>

как это работает?

вы можете отобразить пользовательские подсказки с псевдоэлементами, извлекая значения пользовательских атрибутов с помощью attr()

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

<span title="This will show as a tooltip">Mouse over for a tooltip!</span>
<a href="http://www.stackoverflow.com" title="Link to stackoverflow.com">stackoverflow.com</a>
<img src="something.png" alt="Something" title="Something">

все они будут отображать всплывающие подсказки в большинстве браузеров.

the "title" атрибут будет использоваться в качестве текста для всплывающей подсказки браузером, если вы хотите применить стиль к нему рассмотреть возможность использования некоторых Плагины

для основной подсказки, вы хотите:

<span title="This is my tooltip"> Hover on me to see tooltip! </span>