Чат веб-разработчиков
Подсказка при наведении на ссылку: как сделать

Всплывающая подсказка для ссылок

Всем привет. Сегодня поговорим о всплывающих подсказок для наших ссылок.

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

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

Вот как это выглядит на практике:

Код доступен только после покупки курса HTML для начинающих.

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

Вот так это выглядит в браузере:
Ссылка с подсказкой

Подсказки имеет смысл использовать для ссылок-кнопок. Например, если вы наведёте на кнопку "Следующий урок" под данной статьёй, то увидите всплывающую подсказку с названием урока.

Читайте также
Комментарии


ol
ol

Спасибо, полезно.

yulia.rodnaya
yulia.rodnaya
<a title="Подсказка" href="#">Ссылка</a>

Зачем знак "#" перед ссылкой? У меня не получилось создать ссылку по примеру выше. А вот без # все прекрасно работает:

<a title="Фото котика" href="https://img03.rl0.ru/713339df632eda7df596ba65d6a38e69/765x525/news.rambler.ru/img/2018/01/24190213.165055.1818.jpg">Котик</a>
ivashkevich
ivashkevich

Спасибо, исправил

ImmortalPsych
ImmortalPsych

Збс урок: хоть и маленький, но очень полезный. Спасибо)

ivashkevich
ivashkevich

Не за что)