Будни разработчика

Стилизация тултипов

Два года назад я писал о проблеме с title и о принятом рабочей группой CSS предложении добавить псевдо-элемент ::tooltip от Лии Веру. Похоже, команда Edge займётся тултипами, о чём можно судить по статье Патрика Броссета.

Дисклеймер: это обзор раннего предложения новых функций. Синтаксис может измениться в будущем или от функций могут отказаться

Общая практика такова, что стоит избегать использования атрибута title из-за ряда проблем. Патрик описывает эти проблемы в статье. Текущее решение команды Edge — добавить опциональный «сброс», как это сделано в стилизуемом :


/*
Новый псевдо-элемент,
выбирает все тултипы
*/
::tooltip {
/* Включение стилизации */
appearance: base;
/* Стили тултипа */
}


Наведи на меня


Свойство appearance: base включает стилизацию. Системный тултип заменяется на псевдо-элемент с базовыми стилями. Он привязан к элементу с помощью Anchor Positioning и работает под капотом на основе Popover API и Interest Invokers.

Это решает многие проблемы с тултипом title:

- Появляется при наведении и фокусе;
- Стилизуется как обычный псевдо-элемент;
- Задержка появления контролируется свойством interest-delay;
- Реагирует на изменение размера шрифта;
- Закрывается при нажатии Esc;
- Можно навести курсор на контент.

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

В качестве альтернативы предлагается новый атрибут tooltip. Он работает как title, но без отображения системного тултипа, с определённой семантикой и связями и ограничен , , , , :


::tooltip {
/* Стили тултипа */
}


Наведи на меня


С точки зрения доступности рекомендации для стилизуемых тултипов выглядят так:
- Не переопределяют имя элемента;
- Встроенная роль tooltip;
- Элемент ссылается на тултип через aria-describedby.

Но есть и другой способ создания тултипов — сочетание уже существующих Popover API и Interest Invokers. Вместо атрибута можно использовать элемент, связать его с триггером через Anchor Positioning и добавить поведение через атрибуты:



Наведи на меня, у меня есть тултип с HTML



Это тултип с HTML


В свежем 547 выпуске Веб-стандартов обсуждалась статья Патрика. Ведущие задались вопросом: зачем нам два разных способа создания тултипов, когда Popover и Interest Invokers решают задачу? Я вижу это как решения разных задач.

Простые задачи должны решаться просто. Атрибут title/tooltip и псевдо-элемент ::tooltip как раз для простых задач, где нужно вывести короткий текст или подпись к элементу. Браузер сам сделает магию связывания и доступности.

В более сложных сценариях, когда нужны тултипы с HTML или тонкий контроль, в дело вступают Interest Invokers. Но с ними нужно больше повозиться, чтобы сделать хорошо. Часть магии браузера не будет автоматически применяться.

Поэтому нужно вручную:

- Добавить отдельный элемент с popover, id и role;
- Позиционировать тултип относительно триггера через Anchor Positioning;
- Добавить триггеру interestfor и aria-describedby;
- Стилизовать тултип.

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

Можно оставить обратную связь по предложению Edge.

#html #css #ui