Атрибут title | HTML | WebReference
- Содержание
- Синтаксис
- Значения
- Значение по умолчанию
- Пример
- Спецификация
- Браузеры
Добавляет всплывающую подсказку с текстом, которая появляется при наведении курсора на элемент. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменён напрямую с помощью HTML-кода или стилей.
Синтаксис
title="<текст>"
Значения
Произвольная текстовая строка.
Значение по умолчанию
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Атрибут title</title> </head> <body> <p title=»А вот и я!»>Пример всплывающей подсказки</p> </body> </html>Результат данного примера показан на рис. 1.
Рис. 1. Вид всплывающей подсказки
Спецификация
| Спецификация | Статус |
|---|---|
| WHATWG HTML Living Standard | Живой стандарт |
HTML5. 1 | Рабочий проект |
| HTML5 | Рекомендация |
| HTML 4.01 Specification | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры
| 4 | 12 | 1 | 4 | 1 | 1 |
| 1 | 1 | 6 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 19.03.2018
Редакторы: Влад Мержевич
Создание кастомного title
Кастомный «title» (в простонародье tooltip — «Подсказка»)
Проблема
- В мобильной версии сайта не отображался стандартный html-атрибут «title», так как нет реакции на наведение.;
- На сайте html-атрибут «title» содержит текст разного размера и ссылки на другие страницы, при этом перейти по ссылкам не представлялось возможным.
Решение
Для элементов на которых должны отображаться подсказки используется тег «span», к которому добавляется data-атрибут, который мы назвали «data-comment». С помощью класса «.js-span-comment» инициализируется работа js-скрипта.
Javascript использует метод innerHTML, благодаря чему мы можем вставлять содержимое атрибута в виде верстки:
Как работает Javascript код:
Пояснения к коду:
- Функция самовызывающаяся, сделана в виде модуля. Внутри есть главный метод init(), в котором мы ищем все подсказки на странице. Если мы не находим ни одного, тогда функция завершается;
- Если мы находим подсказку, тогда на документ мы вешаем слушателя с событием «click». По клику мы проверяем наличие data-атрибута. Если data-атрибут найден, мы проверяем переменную «flag», если у неё значение «true», тогда мы создаем подсказку. Создается он динамически. Переменная «flag» переключается в «false», чтобы не было создания повторной подсказки;
- Также мы вешаем на window событие «scroll», по которому любая открытая подсказка будет удалена из документа;
- Есть дополнительное условие, при котором мы проверяем ширину экрана при первичном срабатывании функции. Если ширина > 992 px., тогда на подсказку мы вешаем событие «mouseover» (когда курсор находится над тегом «span», который должен показать подсказку). Таким образом мы эмулируем событие «hover». Исчезает подсказка, только если сначала навести на неё курсор, а потом убрать.
Внутри есть главный метод init(), в котором мы ищем все подсказки на странице. Если мы не находим ни одного, тогда функция завершается;
Как позиционируется подсказка:
Системный тег «title» не зависит от ширины экрана браузера и появляется в том месте, где мы навели курсор.
В нашем случае подсказка — это «span» со своими стилями и требовалось выбрать объект, относительно которого должно быть позиционирование. Можно было привязать так же к курсору, но тогда возникли бы проблемы, когда пользователь мог вызвать подсказку у края экрана (например слева, слишком близко к краю). Поэтому было выбрано позиционирование от начала строки, потому что некоторые блоки, на которые должна быть подсказка, могут быть очень длинными и в зависимости от ширины экрана находится в разных местах.
Как работает позиционирование:При создании подсказки мы находим координаты нашего блока с подсказкой. После чего, вычисляем координаты относительно окна браузера и позиционирования подсказки с {position:fixed} в CSS-стилях.
Координаты находим с помощью метода
getBoundingClientRect(). Координата «left» = это left нашего блока с подсказкой. Координата «top» = это сумма высоты нашего блока + координата «top» + 3 px. (чтобы наша подсказка не закрывала текст).
Результат
Когда требуется дополнительный функционал (см. примеры ниже), можно использовать кастомную подсказку. В остальных случаях лучше обойтись стандартным тегом «title».
-
На мобильных устройствах появилась возможность отображать подсказки и взаимодействовать с ними:
- Появилась возможность копировать текст из подсказок:
- Появилась возможность переходить по ссылкам в подсказке:
Можно ли отформатировать всплывающую подсказку HTML (атрибут title)?
спросил
Изменено 4 года, 10 месяцев назад
Просмотрено 207 тысяч раз
Можно ли отформатировать всплывающую подсказку в формате HTML?
У меня есть DIV с атрибутом title=»foo!».
- HTML
- всплывающая подсказка
0
Попробуйте использовать коды объектов, например
для CR,
для LF и для ТАБ.
Например:
Наведи меня
4
Нет. Но есть и другие варианты, такие как Overlib и jQuery, которые дают вам эту свободу.
- jTip: http://www.codylindley.com/blogstuff/js/jtip/
- Подсказка jQuery: https://jqueryui.com/tooltip/
Лично я бы предложил jQuery в качестве маршрута. Обычно это очень ненавязчиво и не требует дополнительной настройки разметки вашего сайта (за исключением добавления тега скрипта jquery в ваш
2
кажется, вы можете использовать css и трюк (без javascript) для этого:
CSS Tooltips
http://www.menucool.com/tooltip/css-tooltip
http://sixrevisions.com/css/css-only-tooltips/
http://csstooltip.com
1
Лучше поздно, чем никогда, всегда говорят.
Обычно я бы использовал jQuery для решения такой ситуации. Однако при работе над сайтом для клиента, которому требовалось решение без javascript, я пришел к следующему:
<дел>
<дел>
Контент с
обычное форматирование
hover-контент {
дисплей: блок;
}
slice.call(document.querySelectorAll( '[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map (функция (tooltipTriggerEl) {
вернуть новый bootstrap.Tooltip(tooltipTriggerEl)
})
9;
$tooltip-padding-y: $spacer * .25;
$tooltip-padding-x: $spacer * .5;
$всплывающая подсказка: 0;
$tooltip-стрелка-ширина: .8rem;
$tooltip-стрелка-высота: .4rem;
$tooltip-arrow-color: $tooltip-bg;
body 
Кроме того, не полагайтесь только на 
Для атрибутов данных добавьте имя параметра к 
Пример: контейнер 
Если false, свойство 
На практике это также используется для применения всплывающих подсказок к динамически добавляемым элементам DOM ( 
Обратите внимание, что эти классы будут добавлены в дополнение к любым классам, указанным в шаблоне. Чтобы добавить несколько классов, разделите их пробелами: 
Это может быть полезно, если вы предпочитаете использовать выделенную библиотеку для выполнения очистки.
Конфигурация Popper.
0024 или 
