Добавляйте текст при наведении курсора без 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 вариантов подсказок.

— АБК
источник