Всплывающие подсказки кажутся самой маленькой проблемой пользовательского интерфейса, которая может возникнуть. Они крошечные и обычно скрыты. Когда кто-то спрашивает, как его создать, традиционный ответ почти всегда дает использование какой-либо библиотеки JavaScript. И долгое время это был разумный совет. Я тоже последовал этому. На первый взгляд всплывающая подсказка проста. Наведите указатель мыши или сосредоточьтесь на элементе, отобразите небольшой прямоугольник с текстом, а затем скройте его, когда пользователь уйдет. Но как только вы отправите его реальным пользователям, преимущества начнут проявляться. Пользователи клавиатуры вводят триггер, но никогда не видят всплывающую подсказку. Программы чтения с экрана объявляют об этом дважды или не объявляют вообще. Подсказка мерцает, если вы перемещаете мышь слишком быстро. Он перекрывает контент на меньших экранах. Нажатие Esc не закрывает его. Фокус теряется. Со временем мой код всплывающей подсказки превратился в то, чем мне больше не хотелось владеть. Слушателей событий скопилось. Наведение и фокус нужно было обрабатывать отдельно. Внешние щелчки нужны в особых случаях. Атрибуты ARIA приходилось синхронизировать вручную. Каждое небольшое исправление добавляло еще один уровень логики. Библиотеки помогли, но они также были больше похожи на черные ящики, над которыми я работал вместо того, чтобы полностью понять, что происходит за кулисами. Именно это подтолкнуло меня обратить внимание на новый API Popover. Я хотел посмотреть, что произойдет, если я пересоберу одну всплывающую подсказку, используя собственную модель браузера, без помощи библиотеки. В начале стоит отметить, что, как и в случае с любой новой функцией, в ней есть некоторые проблемы, которые все еще дорабатываются. Тем не менее, в настоящее время он пользуется отличной поддержкой браузеров, хотя некоторые части общего API находятся в процессе изменения. Тем временем стоит присмотреть за Каниусе. «Старая» подсказка До появления Popover API использование библиотеки подсказок не было простым способом. Это было по умолчанию. В браузерах не было встроенной концепции всплывающей подсказки, которая работала бы с мышью, клавиатурой и вспомогательными технологиями. Если вас заботит правильность, единственным вариантом будет использование библиотеки, и я именно это и сделал. На высоком уровне шаблон всегда был один и тот же: элемент триггера, скрытый элемент всплывающей подсказки и JavaScript для координации этих двух элементов.
Библиотека обрабатывала проводку, которая позволяла элементу отображаться при наведении или фокусе, скрываться при размытии или отпускании мыши, а также перемещать/изменять размер при прокрутке.
Со временем всплывающая подсказка может стать хрупкой. Небольшие изменения несли риск. Незначительные исправления приводили к регрессу. Хуже того, добавление новых всплывающих подсказок унаследовало ту же сложность. Технически все работало, но никогда не казалось решенным или завершенным. Именно так обстояло дело, когда я решил перестроить всплывающую подсказку, используя собственный Popover API браузера. Момент, когда я попробовал API Popover Я перешёл на использование Popover API не потому, что хотел поэкспериментировать с чем-то новым. Я переключился, потому что устал поддерживать поведение всплывающих подсказок, которое, как я полагал, браузер уже должен был понимать. Сначала я был настроен скептически. Большинство новых веб-API обещают простоту, но по-прежнему требуют связки, обработки крайних случаев или резервной логики, которая незаметно воссоздает ту же сложность, от которой вы пытались уйти. Итак, я попробовал API Popover в минимально возможном объеме. Вот как это выглядело:
1. Клавиатура «просто работает» Поддержка клавиатуры зависела от правильного выравнивания нескольких слоев: фокус должен был вызывать всплывающую подсказку, размытие должно было ее скрывать, Esc нужно было подключать вручную, и время имело значение. Если вы пропустите один крайний случай, всплывающая подсказка либо останется открытой слишком долго, либо исчезнет, прежде чем ее можно будет прочитать. Если для атрибута popover установлено значение auto или manual, браузер берет на себя основные функции: Tab и Shift+Tab ведут себя нормально, Esc каждый раз закрывает всплывающую подсказку, и никаких дополнительных прослушивателей не требуется.
Из моей кодовой базы исчезли глобальные обработчики нажатия клавиш, логика очистки, специфичная для Esc, и проверки состояния во время навигации с помощью клавиатуры. Работа с клавиатурой перестала быть чем-то, что мне нужно было поддерживать, и стала гарантией браузера. 2. Предсказуемость программы чтения с экрана Это былсамое большое улучшение. Как я обрисовал ранее, даже при тщательной работе ARIA поведение было разным. Каждое маленькое изменение казалось рискованным. Использование поповера с правильной ролью выглядит и ощущается намного более стабильно и предсказуемо в плане того, что произойдет:
И вот еще одна победа: после перехода Lighthouse перестал помечать неправильные предупреждения о состоянии ARIA для взаимодействия, в основном потому, что больше нет пользовательских состояний ARIA, в которых я мог бы случайно ошибиться.
3. Управление фокусом Фокус раньше был хрупким. Раньше у меня были такие правила, как: позволить триггеру фокуса показывать всплывающую подсказку, перемещать фокус во всплывающую подсказку и не закрывать, триггер размытия, когда он слишком близко, а также закрывать всплывающую подсказку и восстанавливать фокус вручную. Это работало, пока не перестало. С помощью Popover API браузер реализует более простую модель, в которой фокус может более естественно перемещаться во всплывающее окно. Закрытие всплывающего окна возвращает фокус к триггеру, и нет никаких невидимых ловушек фокуса или моментов потери фокуса. И я не добавил код восстановления фокуса; Я удалил его.
Заключение API Popover означает, что всплывающие подсказки больше не являются чем-то, что вы имитируете. Это то, что браузер понимает. Открытие, закрытие, поведение клавиатуры, обработка Escape и большая часть специальных возможностей теперь обеспечиваются самой платформой, а не специальным JavaScript. Это не означает, что библиотеки всплывающих подсказок устарели, поскольку они по-прежнему имеют смысл для сложных систем проектирования, тяжелой настройки или устаревших ограничений, но значение по умолчанию изменилось. Впервые самая простая подсказка может оказаться и самой правильной. Если вам интересно, попробуйте этот эксперимент: просто замените только одну всплывающую подсказку в своем продукте на Popover API, не переписывайте все, не переносите всю систему, а просто выберите одну и посмотрите, что исчезнет из вашего кода. Когда платформа предоставляет вам лучший примитив, выигрыш заключается не только в меньшем количестве строк JavaScript, но и в том, что вам вообще придется беспокоиться о меньшем количестве вещей. Полный исходный код можно найти в моем репозитории на GitHub. Дальнейшее чтение Для более глубокого изучения всплывающих окон и связанных с ними API:
«Poppin’ In», Джефф Грэм «Разъяснение связи между всплывающими окнами и диалогами», Зелл Лью «Что такое popover=hint?», Уна Кравец «Команды Invoker», Дэниел Шварц «Создание автоматически закрывающегося уведомления с помощью HTML-поповера», Прити Объяснение API Popover открытого пользовательского интерфейса «Поп (над) воздушными шарами», Джон Рея «Позиционирование привязки CSS», Хуан Диего Родригес
MDN также предлагает подробную техническую документацию для Popover API.
