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

в следующем коде я хочу, чтобы подсказка появилась, когда пользователь наводит диапазон, как это сделать? Я не хочу использовать ссылки.

<span> text </span>
302
css html

5 ответов

вот простой, встроенный способ:

<span title="My tip">text</span>

это дает вам текстовые подсказки. Если вы хотите богатые всплывающие подсказки с форматированным HTML в них, вам нужно будет использовать библиотеку для этого. К счастью!--4-->есть множество таких.

562

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

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

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

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

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

например, следующее добавит tooltop, расположенный в нижней части элемента span.

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

enter image description here

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

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

81

в большинстве браузеров атрибут 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">

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

20

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

4

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

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