Будни разработчика on Telegram: “Стилизация тултипов Два года назад я писал о про…”

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

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

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

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

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

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

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

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

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

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

<style>
  ::tooltip {
    /* Стили тултипа */
  }
</style>
<button tooltip="Это тултип">
  Наведи на меня
</button>

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

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

<!--
interestfor связывает кнопку
с тултипом и отображает
при наведении и фокусе
-->
<button
  interestfor="my-tooltip"
  aria-describedby="my-tooltip"
>
  Наведи на меня, у меня есть тултип с HTML
</TMLbutton>
<!--
popover делает элемент
всплывающим и позволяет
добавить любой контент
-->
<div
  id="my-tooltip"
  popover
  role="tooltip"
>
  Это тултип с <span>HTML</span>
</div>

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

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

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

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

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

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

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

#html #css #ui