Существуют ли какие-либо жесткие и быстрые правила для принятия решения о том, когда использовать всплывающую подсказку, а когда всплывающую подсказку? Я понимаю, что всплывающие подсказки не имеют заголовка, но какие еще соображения?

Чтобы быть последовательным, имеет ли смысл всегда использовать всплывающее окно на всем сайте? Или можно использовать оба?

34
vphilipnyc 8 Янв 2016 в 08:25
1
Существует запрос, в котором обсуждается, когда использовать всплывающую подсказку. Пожалуйста, обратитесь к ux .stackexchange.com/questions/1245/…
 – 
Vjay
8 Янв 2016 в 09:18
1
Спасибо, Вджей, но нет упоминания о том, когда использовать поповер.
 – 
vphilipnyc
9 Янв 2016 в 01:57

2 ответа

Лучший ответ

Есть пара соображений при выборе между всплывающей подсказкой и всплывающим окном.

Цель контента

Подсказки предназначены именно для этого, подсказки или подсказки о том, что делает инструмент или другое взаимодействие. Они предназначены для разъяснения или помощи в использовании контента, над которым они находятся, а не для добавления дополнительного контента:

enter image description here

Всплывающие окна предназначены для предоставления соответствующего дополнительного контента. введите здесь описание изображения

Размер контента

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

Поповеры, с другой стороны, могут быть гораздо более подробными, они могут включать заголовок и много строк текста в теле.

Взаимодействия

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

Всплывающие окна обычно можно закрыть, щелкнув другие части страницы или повторно щелкнув цель всплывающего окна (в зависимости от реализации), по этой причине вы можете настроить всплывающее окно, чтобы позволить вам взаимодействовать с другими элементами. на странице, но при этом иметь возможность читать ее содержимое.

Вдобавок ко всему, поскольку всплывающие окна остаются открытыми при наведении курсора мыши на их цель, вы можете добавить в них дополнительные кнопки или взаимодействия:

enter image description here

Вывод

Если вы хотите дать небольшую подсказку в несколько слов о том, как или какой элемент на странице использует всплывающую подсказку.

Если вы хотите добавить какой-либо дополнительный контент, взаимодействия или контент более чем на строку; или если вам нужно, чтобы содержимое оставалось открытым без наведения мыши на цель, используйте всплывающее окно.

Хотя это следует отметить из-за проблем с доступностью, потенциальных проблем с SEO и отсутствия обнаружения всплывающей подсказки / всплывающего окна, ни одно из них не рекомендуется, если они вам абсолютно не нужны.

42
Community 16 Июн 2020 в 13:51

Подсказка — это особый случай всплывающей подсказки, обычно содержащий неинтерактивный текст, который нельзя отклонить.

Технически вы можете использовать всплывающие подсказки повсюду или внедрить всплывающую подсказку, используя всплывающие под капотом.

P.s. всплывающая подсказка может отображаться только одна на странице, поэтому библиотека может быть оптимизирована для этого (например, удерживая один div для всех всплывающих подсказок и просто обновляя и перемещая его)

0
TheZver 22 Окт 2020 в 14:28
Привет, TheZver, а когда следует использовать всплывающую подсказку вместо всплывающей подсказки?
 – 
Nash
22 Окт 2020 в 11:59
Привет, Нэш! Используйте всплывающую подсказку для отображения описаний при наведении (аналогично атрибуту заголовка HTML — developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…). В более сложных случаях используйте всплывающие окна, например: - Требуется взаимодействие с всплывающим содержимым - Всплывающее содержимое запускается не при наведении курсора - Всплывающее содержимое имеет свои собственные всплывающие подсказки / всплывающие окна - Содержимое содержит специальную рамку/заголовок и т.п.
 – 
TheZver
22 Окт 2020 в 14:42