Title div: Атрибут title | htmlbook.ru

Leave a Comment / Разное / By /

HTML/Атрибут title (Элемент style)

Синтаксис

(X)HTML

<style rel="..." title="[значение]">
  ...
</style>

Описание

Атрибут / параметр title (от англ. «title» ‒ «название, заглавие») указывает имя таблицы стилей. Из таблиц стилей с одинаковыми именами создаётся альтернативный набор таблиц стилей, то есть все одноимённые таблицы стилей сводятся в одну (не путать альтернативный набор таблиц стилей и «альтернативную» таблицу стилей). Согласно HTML спецификации, при наличии нескольких альтернативных наборов таблиц стилей, браузер должен предоставлять возможность выбора между наборами.

Примечание

Если в style элементе отсутствует данный атрибут, то такой элемент не имеет названия; значение «title» атрибута родительских элементов не применяется (не наследуется) к style элементу.

Поддержка браузерами

Chrome

Поддерж.

[1][3][4]

Firefox

Поддерж.[1][3]

Opera

Поддерж.[1][2]

Maxthon

Поддерж.[1][3]

IExplorer

Поддерж.[1][3]

Safari

Поддерж.[1][3]

iOS

Поддерж.[1][3]

Android

Поддерж.[1][3]

  • [1] ‒ отсутствует инструмент выбора между альтернативными наборами таблиц стилей.
  • [2] ‒ применяются сразу все альтернативные наборы таблиц стилей.
  • [3] ‒ применяется только первый набор «предпочтительных» или «альтернативных» таблиц стилей.
  • [4] ‒ «альтернативные» таблицы стилей применяются только в наборе с «предпочтительными» таблицами стилей.

Спецификация

Верс.Раздел
HTML
2.0—
3. 2STYLE and SCRIPT
4.0114.3.2 Specifying external style sheets
DTD: Transitional Strict Frameset
5.04.2.6 The style element
The title attribute…
5.14.2.6. The style element
The title attribute…
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Значения

В качестве значения указывается имя таблицы стилей.

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Параметр title (Элемент style)</title>
<!— Постоянные таблицы стилей —>
<style type=»text/css»> li { color: white; } </style>
<style rel=»stylesheet» type=»text/css»> .persistent { color: green; } </style>

<!— Наборы «предпочтительных» таблиц стилей —>
<style rel=»stylesheet» type=»text/css» title=»Красный»> .preferred1 { color: red; } </style>
<style rel=»stylesheet» type=»text/css» title=»Оранжевый»> .preferred2 { color: orange; } </style>

<!— Наборы «альтернативных» таблиц стилей —>
<style rel=»alternate stylesheet» type=»text/css» title=»Красный»> p { color: red; } </style>
<style rel=»alternate stylesheet» type=»text/css» title=»Оранжевый»> p { color: orange; } </style>

<style rel=»alternate stylesheet» type=»text/css» title=»Blue»> . alternate1 { color: blue; } </style>
<style rel=»alternate stylesheet» type=»text/css» title=»Violet»> .alternate2 { color: violet; } </style>
<style rel=»alternate stylesheet» type=»text/css» title=»Blue»> h2 { color: blue; } </style>
<style rel=»alternate stylesheet» type=»text/css» title=»Violet»> h2 { color: violet; } </style>
</head>
<body>
<h2>Пример использования атрибута «title»</h2>

<p>Действующие таблицы стилей:</p>
<ul>
<li>Постоянная</li>
<li>Предпочтительная 1</li>
<li>Предпочтительная 2</li>
<li>Альтернативная 1</li>
<li>Альтернативная 2</li>
</ul>
</body>
</html>

Параметр title (Элемент style)

Создание кастомного title

Кастомный «title» (в простонародье tooltip — «Подсказка»)

Проблема

  1. В мобильной версии сайта не отображался стандартный html-атрибут «title», так как нет реакции на наведение. ;
  2. На сайте html-атрибут «title» содержит текст разного размера и ссылки на другие страницы, при этом перейти по ссылкам не представлялось возможным.

Решение

Для элементов на которых должны отображаться подсказки используется тег «span», к которому добавляется data-атрибут, который мы назвали «data-comment». С помощью класса «.js-span-comment» инициализируется работа js-скрипта.

Javascript использует метод innerHTML, благодаря чему мы можем вставлять содержимое атрибута в виде верстки:

Как работает Javascript код:

Пояснения к коду:

  1. Функция самовызывающаяся, сделана в виде модуля. Внутри есть главный метод init(), в котором мы ищем все подсказки на странице. Если мы не находим ни одного, тогда функция завершается;
  2. Если мы находим подсказку, тогда на документ мы вешаем слушателя с событием «click». По клику мы проверяем наличие data-атрибута. Если data-атрибут найден, мы проверяем переменную «flag», если у неё значение «true», тогда мы создаем подсказку. Создается он динамически. Переменная «flag» переключается в «false», чтобы не было создания повторной подсказки;
  3. Также мы вешаем на window событие «scroll», по которому любая открытая подсказка будет удалена из документа;
  4. Есть дополнительное условие, при котором мы проверяем ширину экрана при первичном срабатывании функции. Если ширина > 992 px., тогда на подсказку мы вешаем событие «mouseover» (когда курсор находится над тегом «span», который должен показать подсказку). Таким образом мы эмулируем событие «hover». Исчезает подсказка, только если сначала навести на неё курсор, а потом убрать. Сделано это ради того, чтобы пользователь мог скопировать содержимое, либо перейти по ссылке, указанной в подсказке.

Как позиционируется подсказка:

Системный тег «title» не зависит от ширины экрана браузера и появляется в том месте, где мы навели курсор.

В нашем случае подсказка — это «span» со своими стилями и требовалось выбрать объект, относительно которого должно быть позиционирование. Можно было привязать так же к курсору, но тогда возникли бы проблемы, когда пользователь мог вызвать подсказку у края экрана (например слева, слишком близко к краю). Поэтому было выбрано позиционирование от начала строки, потому что некоторые блоки, на которые должна быть подсказка, могут быть очень длинными и в зависимости от ширины экрана находится в разных местах.

Как работает позиционирование:

При создании подсказки мы находим координаты нашего блока с подсказкой. После чего, вычисляем координаты относительно окна браузера и позиционирования подсказки с {position:fixed} в CSS-стилях. Координаты находим с помощью метода getBoundingClientRect()

. Координата «left» = это left нашего блока с подсказкой. Координата «top» = это сумма высоты нашего блока + координата «top» + 3 px. (чтобы наша подсказка не закрывала текст).

Результат

Когда требуется дополнительный функционал (см. примеры ниже), можно использовать кастомную подсказку. В остальных случаях лучше обойтись стандартным тегом «title».

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

  2. Появилась возможность копировать текст из подсказок:

  3. Появилась возможность переходить по ссылкам в подсказке:

title — HTML: язык гипертекстовой разметки

Глобальный атрибут title содержит текст, представляющий справочную информацию, относящуюся к элементу, которому он принадлежит.

В основном атрибут title используется для обозначения элементов