Добавляйте текст при наведении курсора без JavaScript, как мы наводим на репутацию пользователя

262

В stackoverflow, когда мы наводим курсор на репутацию пользователя, мы видим текст. Я видел это во многих местах, и исходный код говорит мне, что это можно сделать без js. И я попробовал и получил только это

 <div="text">hover me</div>
html hover ясень
источник

Ответы:

495

Используйте titleатрибут, например: 

<div title="them's hoverin' words">hover me</div>
Развернуть фрагмент

или: 

<span title="them's hoverin' words">hover me</span>
Развернуть фрагмент

gcochard
источник
3
это то же самое, что когда мы нависаем над репутацией пользователя
Ash
1
Да, если вы посмотрите на исходный код репутации, вы увидите, что атрибут title установлен в reputation score.
gcochard
6
@Kevin Это решение на самом деле лучше, чем решение JavaScript, поскольку оно будет работать в браузерах с отключенным JavaScript, а также добавляет подсказку для программ чтения с экрана о содержимом элемента.
gcochard
1
@KevinMeredith Я бы сказал, что единственная мера, по которой решение JS было бы лучше, - это то, что вы не можете стилизовать текст, который появляется и остается только с собственной реализацией.
ноль298
1
@David d C e Freitas: спасибо за то, что осветлили StackOverflow с вашим редактированием этого ответа ... не знаю, как на самом деле пометить вас, ну да ладно
Мередит
16

Атрибут title также хорошо работает с другими элементами html, например со ссылкой ...

<a title="hover text" ng-href="{{getUrl()}}"> download link
</a>
Славомир
источник
15

Часто я достигаю аббревиатуры HTML-тег в этой ситуации.

<abbr title="Hover">Text</abbr>

https://www.w3schools.com/tags/tag_abbr.asp

Гарри Бош
источник
7
Этот элемент специально предназначен для обозначения сокращений, поэтому это не очень хорошая идея. Вы говорите системам преобразования текста в речь произносить это как сокращение. Используйте, <span>если вы просто хотите навести текст.
Ларс Мариус Гаршол
8

Вы ищете подсказку

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

<div title="This is my tooltip">

Для более красивой версии javascript вы можете посмотреть:

http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632

Приведенная выше ссылка дает вам 12 вариантов подсказок.

АБК
источник