Какой атрибут в теге задает текст подсказки всплывающей при наведении на элемент
Перейти к содержимому

Какой атрибут в теге задает текст подсказки всплывающей при наведении на элемент

  • автор:

Атрибут title

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

Синтаксис

title="текст"

Значения

Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

Значение по умолчанию

Применяется к тегам

Пример

HTML5 IE Cr Op Sa Fx

    Атрибут title  

Пример всплывающей подсказки

Результат данного примера показан на рис. 1.

Вид всплывающей подсказки

Рис. 1. Вид всплывающей подсказки

Статьи по теме

  • Альтернативный текст
  • Атрибуты ссылок

Атрибут title

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

К сожалению, применить какие-либо CSS стили к этой подсказке невозможно, а выглядит эта подсказка не очень (используйте JavaScript, чтобы сделать стилизованную подсказку).

Пример

Давайте попробуем навести мышкой на текст абзаца из примера — и увидим содержимое атрибута title в виде всплывающей подсказки:

HTML: Атрибуты HTML

Разметка информации на странице включает в себя множество тонкостей и нюансов. Например, можно задавать не только тип элемента, но и передавать дополнительную информацию, которая будет обработана браузером. Наведите курсор на текст ниже:

Наведите курсор мыши на эту строку текста. Лучше сделать это с компьютера

При наведении мыши на элемент появилось небольшое окно с текстом «Всплывающая подсказка. Здесь можно указать дополнительную информацию». Такое поведение задаётся с помощью атрибутов — специальных конструкций, которые могут влиять на вывод информации на странице. Каждый тег в HTML имеет несколько стандартных атрибутов, которые записываются по шаблону атрибут=»значение» , где:

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

Разметка примера со всплывающей подсказкой:

Наведите курсор мыши на эту строку текста. Лучше сделать это с компьютера

Атрибут title можно использовать не только на параграфах, а на любом элементе страницы. Такие атрибуты называются глобальными, так как не зависят от элемента. В противовес им есть атрибуты, которые уникальны для одного или нескольких тегов. Например, атрибут colspan , который указывает на объединение ячеек в таблицах. Его использование вне таблиц не имеет никакого смысла.

Атрибуты могут неявно влиять на вывод информации. Например, при использовании языка стилей CSS, встречается атрибут class , задача которого — отделить похожие элементы друг от друга с помощью значения атрибута. О работе классов вы узнаете из курса по CSS, а сейчас важно знать, что этот атрибут никак не проявляет себя при выводе информации на страницу

У одного тега может быть указано сразу несколько атрибутов. Тогда они записываются последовательно, при этом порядок указания не имеет значения:

Параграф с несколькими атрибутами

В этом уроке мы изучили понятие атрибута и их запись. Изучили работу атрибутов title и class , а также узнали о том, что атрибуты бывают глобальные и уникальные для HTML-элементов. Глобальные атрибуты могут быть использованы для любого тега, тогда как уникальные только для определённых

Задание

Создайте параграф с произвольным текстом и всплывающей подсказкой. Добавьте к нему класс hexlet

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

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

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное

  • Все глобальные атрибуты можно посмотреть на MDN Web Docs

Общий HTML атрибут title

Атрибут title определяет дополнительную информацию о HTML элементе.

Информация отображается как всплывающая подсказка при наведении указателя мыши на элемент.

В HTML5 атрибут title можно использовать с любым HTML элементом (все элементы с этим атрибутом будут проходить валидацию. Тем не менее, это не всегда имеет смысл!).

В HTML 4.01 атрибут title не может использоваться с элементами , , , , , , , .

Синтаксис атрибута
Значения атрибута
Значение Описание
текст Текст пояснения
Пример использования атрибута

Использование атрибута title в HTML документе:

 

ВОЗ была основана в 1948 году.

MSiter.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *