Альтернативный текст и всплывающая подсказка


Содержание

Заставить всплывающую подсказку, как это делает альтернативный текст

Кажется, у меня есть противоположная проблема, с которой сталкивается большинство людей: у меня есть «всплывающая подсказка» -esque div внутри table , и я бы хотел, чтобы она покинула сам стол, как title элемент делает:

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

Я пробовал совмещать с существующими элементами, которые могут появиться за столом, но не смог понять семантику :before и :after . Я также попытался изменить z-индекс tooptip (и всех других элементов), но это не дало заметного эффекта. Поэтому вместо этого я написал решение javascript, чтобы обернуть рассматриваемые элементы с помощью div , который вызывает всплывающую подсказку, когда вместо этого они наводятся. Похоже, это работает нормально; теперь мне просто нужна всплывающая подсказка, которая появляется за пределами родительского контейнера.

Могу ли я получить всплывающую подсказку, как альтернативный текст? В качестве альтернативы, я могу стилизовать альтернативный текст?

Как сделать всплывающую подсказку | CSS

Всплывающая подсказка в HTML

Согласно w3.org

  1. текст атрибута alt отображается, когда не может быть показан объект,
  2. текст атрибута title отображается во всплывающей подсказке, когда курсор мышки наведён на элемент.
содержимое
Пример: title=»про атрибут title: содержимое в большинстве случаев не индексируется поисковыми системами»> наведи на меня
Результат: наведи на меня
Пример: наведи на меня
Результат: наведи на меня

Появляющаяся подсказка (сообщение) в JavaScript

Пример: нажми на меня
Результат: нажми на меня

Своя всплывающая подсказка к тексту

Что будет работать на CSS

Желательное поведение подсказки:

  1. появляться с небольшой задержкой, чтобы не мешать незаинтересованным в подсказке посетителям,
  2. появляться по центру (слева/справа) наводимого элемента,
  3. адаптироваться к ширине и высоте окна браузера,
  4. иметь HTML-содержимое (изображение, ссылка), а не только текст,
  5. подстраиваться под содержимое (или не более содержимого, или не более указанной величины, или не более окна браузера),
  6. работать на сенсорных экранах (появляться и при наведении, и при нажатии),
  7. индексироваться поисковыми системами.

Примеры: наведи на меня (по центру) В статье «Как заработать деньги в интернете» можно увидеть практическое использование , наведи на меня (влево) Важно: tabindex в теге нужен чтобы срабатывал :focus , наведи на меня (вправо) Ничто так не воодушевляет, как сознание своего безнадёжного положения Альбер Камю

Пример с анимацией: наведи на меня Короткая

Что нельзя сделать без JavaScript

Желательное поведение:

  1. находится в видимой области окна браузера.

Пример: наведи на меня Даже когда ширина подсказки меньше окна браузера, она может уходить за край видимой области, так как подсказка располагается относительно элемента, а не относительно HTML-документа

Как сделать всплывающую подсказку, появляющуюся рядом с курсором мышки или рядом с тем местом, куда нажал посетитель

21 комментарий:

Павел Каким образом относится высказывание:»Это правило не относится к IE, поэтому лучше указать оба атрибута.» к IE? Означенные атрибуты собственно нужны не столько пользователям и браузерам, а поисковикам. Так как первым(тем кто ищет информацию отключив мультимедию) до лампочки изображения(а ссылка, как правило анонсируется), из вторых как раз таки правильно отображает указанные атрибуты IE. Вот у гугловского хрома проблема с alt. NMitra Спасибо за то, что обратили внимание на этот момент. Строку убрала, дабы не вводить в заблуждение читателей. Я имела ввиду то, что версии ниже IE 8 отображают подсказку при наведении мышки на изображение, если в теге img указан alt (без title). Серебро Оригинальное оформление. Только свойства CSS у вас прописаны для блоков podskazka, а сама конструкция подсказки привязана к блоку priskazka, что может привести к ошибкам в оформлении у читателей, взявших ваш пример на вооружение. NMitra Совершено верно. Благодарю за замечание. Бегу исправлять PANIC Я хочу, чтобы при наведении на ссылку в гаджете «страницы» (или «список ссылок») появлялась всплывающая подсказка (как у Вас вверху).
Но куда и что вставлять. не могу понять NMitra Нужно прописывать тегу a атрибут title. Это возможно либо в гаджете HTML/JavaScript, либо если размещать ссылки прямо в шаблоне. Maniak помогите привязать к картинке а картинку сделать к левому краю экрана — хочу сделать всплывающие контакты сейчас работает только после нажатия NMitra Похоже вы справились без моей помощи. К сожалению, ранее не было возможности ответить — находилась вне связи. Мишаня Скажите, пожалуйста, а можно установить какой-нибудь код, чтобы на всех размещённыхв блоге фотографиях оторбажались её свойства (размер и габариты). NMitra Правая кнопка мышки — «Информация об изображении» даст всю необходимую информацию. Можно прописать title элементу, где указать размеры. Как автоматизировать этот процесс, я точно не скажу.

Как добавить всплывающую подсказку с помощью HTML и CSS

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

Проблема с всплывающими подсказками

Вот некоторые из недостатков применения всплывающих подсказок:

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

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


Метод с использованием HTML

Самый простой добавления всплывающих подсказок – атрибут title.

Посмотрите на пример, приведенный ниже.

Если вы хотите увидеть подсказку, просто наведите указатель мыши на ссылку. title — это глобальный атрибут, который можно добавлять к любому элементу HTML.

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

Метод с использованием CSS

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

Вот HTML-код предыдущего примера.

Для реализации нового способа используется CSS-свойство content и псевдоэлемент :after.

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

Этот способ отображения всплывающей подсказки использует большое количество различных функций: свойство content, псевдоэлемент ::after, positionfor::after и т. д. Но если пользователь применяет устаревший браузер, то всплывающая подсказка не будет отображаться корректно.

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

CSS для всплывающей подсказки с изображением выглядит следующим образом:

Если веб-страница работает на основе HTML5, вы можете воспользоваться новыми пользовательскими атрибутами данными. Они позволяет реализовать подсказку в HTML-коде, а не в CSS. В этом случае подсказки являются контентом, а не стилем CSS.

Код примера на HTML5:

Демонстрация: всплывающая подсказка с использованием пользовательских атрибутов данных HTML5:

Но этот способ не будет работать в устаревших браузерах. А также в программах чтения с экрана.

Объяснение примеров кода на CSS

Чтобы всплывающая подсказка появлялась рядом с элементом, над которым находится указатель мыши, я использовал несколько приемов. Я установил для исходного элемента относительное позиционирование (position: relative). Это делает его точкой отсчета для position: absolute дочернего псевдоэлемента.

Затем всплывающая подсказка помещается на 1.1em ниже ссылки. Это смещает ее чуть ниже слов, чтобы она не закрывала их. А также на 1em вправо, чтобы подсказка смещалась примерно на 1 символ в сторону.

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

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

Я также присвоил значение z-index 1, чтобы всплывающая подсказка отображалась над существующим содержимым.

Остальная часть CSS-кода предназначена для управления внешним видом всплывающей подсказки и включает в себя обычные свойства padding, border и width.

Свойство content содержит саму всплывающую подсказку. Если вы хотите использовать изображение, замените текст URL-адресом этого изображения.

В примере на HTML5 создается пользовательский атрибут данных с именем «data-tooltip» и присваивается ему некоторый текст.

Затем текст вставляется в контент с помощью функции CSS attr(). Проще говоря, attr(data-tooltip) принимает значение атрибута data-tooltip и заменяет его текстом.

Вместо заключения

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

Данная публикация представляет собой перевод статьи « How to Add a Tooltip in HTML/CSS (No JavaScript Needed) » , подготовленной дружной командой проекта Интернет-технологии.ру

MagentaWAVE


Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.

Простые всплывающие подсказки на CSS

Реализация простых подсказок с помощью атрибута data-title

Самый простой вариант — это CSS-стилизация обычной, текстовой подсказки. Для этого нужно использовать атрибут data-title, вместо привычного title, чтобы избежать появления сразу двух подсказок — с собственным оформлением и стандартным, которое изменить нельзя.


HTML конструкция
выглядит так:

Подсказка появляющаяся по клику реализация с помощью тега ссылки

Создание подсказка появляющейся по клику с помощью тега INPUT

* .tip-three <
display: block;
>

) элементами, применяя к ним необходимые свойства.
На словах такая хитрость или как говорят — CSS:checked хак, будет звучать примерно так: «Если флажок установлен, применить следующий стиль, к такому-то элементу.» Пример из этой статьи является одним из многочисленных вариантов использования :checked.
Более подробное описание можно посмотреть здесь (англ.).

Подсказка появляющаяся при наведении курсора

— когда блок расположен непосредственно рядом с вызывающим элементом.

Общий CSS

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

Просмотреть весь код целиком и самостоятельно поработать с ним, можно скачав HTML-файл с исходным кодом демо-страницы

29 комментариев:

Очень полезная плюшка! Спасибо!

очень интересно и палезно, попробую разобраться! Спасибо!

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

Ирина, спасибо за доверие, но вы правильно заметили что спрашивать не показывая немного нелепо. Ведь не видя ошибки, я не могу вам помочь. Но возможно вам нужно убрать из CSS при добавлении, сноски — /*. */, в этом часто бывает ошибка. А в остальном, уж простите, как говорится, — надо видеть пациента.

Круто. Можно вас попросить,сделать чтобы контент размещался не внутри тега «a» в как у вас во втором примере что на скриптах сделано? Но втором примере применяется скрипт, если его не использовать, то при клике по открывшемуся блоку он пропадает, а если скрипт не отключать, то закрыть блок можно только если нажать на крестик, а хотелось как в первом варианте по любому месту экрана. Хотелось чтоб без скриптов, немного изменить первый вариант чтоб контент находился как во втором было бы здорово. Спасибо

Такое сделать можно, но это уже совсем другая история и совершенно другой код. Для такого варианта можно использовать IMPUTы и псевдокласс:checked , но тогда CSS нужно прописывать отдельно для каждой подсказки. Вариант со скриптом самый простой, поэтому и сделан по минимуму, чем больше функций — тем больше код, это уже будет не простой скрипт, а целый плагин. Если вам нужно без скрипта то используйте этот вариант, внутри можно разместить все , кроме ссылок.

извиняюсь, немного поразмышлял, всё в порядке, этот вариант что без скрипта подходит, но вот столкнулся единственное с одной проблемой, ссылки размещать в блоке можно также кликать тоже можно, но вот если разместить в этом блоке тег список(select->option) и кликнуть по списку, то блок сразу исчезает, я так понимаю тут уже это не исправить? А можно в новом скрипте сделать что-то, чтобы не использовать плагин hoverIntent?

Просто список select так устроен, если это можно так назвать, что отображается поверх всего, вне зависимости от z-index и положения в коде, поэтому ссылка теряет фокус и блок исчезает. Но я когда ее делал даже не думал о том чтобы в нее такой список пихать.:)
hoverIntent можно и не использовать, если нужна просто подсказка по клику, или использовать обычную функцию hover(), но тогда нужно прописывать таймауты для появления при наведении чтобы не было зацикливания. А так этот плагин решает эту проблему.

Пользовался вашим подсказкой около 6 месяцев и все работало. Но с недавних пор, подсказка работать перестала.

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

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

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

Как мне сделать чтобы подсказка не исчезала и срабатывала кнопка соц.сетей ума не приложу. Буду рад любым идеям.

Всплывающая подсказка

Всплывающей подсказкой называется блок с текстом, который появляется при наведении на элемент веб-страницы (рис. 1). Цель такой подсказки — дать более подробную информацию о содержимом элемента. К примеру, для ссылок подсказкой может служить адрес ссылки или краткое описание сайта, на который ведёт ссылка.

Рис. 1. Вид всплывающей подсказки


Для создания подсказки в HTML добавим к нужному элементу пользовательский атрибут data-tooltip с текстом подсказки.

Вывод текста и его оформление дальше возлагается на CSS. Само отображение содержимого атрибута происходит через свойство content. Добавляем его к псевдоэлементу ::after, который привязываем к селектору [data-tooltip] — это позволяет создавать подсказку для любого элемента.

Цвет фона, текста, размеры и положение подсказки также задаются в ::after . Заодно скрываем подсказку, делая её прозрачной через свойство opacity.

Там же устанавливаем и время перехода с помощью свойства transition.

Псевдоэлемент ::after является частью своего родителя, так что :hover начинает срабатывать при наведении не на саму строку, а на невидимую подсказку. Предотвратить взаимодействие курсора мыши с подсказкой можно с помощью свойства pointer-events со значением none .

Чтобы подсказка отображалась, плавно становясь непрозрачной, добавим к :hover свойство opacity со значением 1.

Сюда же можно добавить и другие свойства, вроде left и top . Тогда подсказка будет не только становиться видимой, но и немного перемещаться. В примере 1 показан окончательный код для создания всплывающей подсказки при наведении на абзац.

Всплывающие подсказки, построенные только на CSS

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

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

В то время, как существует много инновационных решений с использованием CSS и JavaScript (с или без использования фреймворка JavaScript, например, jQuery), иногда полезно взглянуть на то, как новые технологии встряхивают давно используемые методы.

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

Всплывающие подсказки — это круто!

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

Начиная с маленького жёлтого блока с текстом, который появляется над элементом, таким как изображение, и выводит содержание атрибута title (или атрибута alt , если вы к несчастью используете Internet Explorer) до основанных на скриптах изощрённых решений с использованием, всплывающие подсказки являются фантастическим инструментом, который, кажется, мало популярен в сообществе дизайнеров.

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

Усиление эффекта воздействия всплывающих подсказок

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

Если вы уже использовали решения на основе jQuery, то, конечно же, обратите внимание на то, что JavaScript может многое из того, что недоступно CSS(например, задержка перед исчезновением выплывающей подсказки). Но выделение и оформление может быть выполнено с помощью CSS, что способствует улучшению дизайна и вдохновляет на создание других прекрасных решений, которые выходит за рамки всплывающих подсказок.

Существует много различных решений для организации всплывающих подсказок.

Что мы собираемся сделать

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

Это означает, что они будут работать в браузерах, которые не поддерживают CSS3 (таких, как Internet Explorer 8 и старше) — они будут выглядеть в них не так хорошо, как в новых браузерах.

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

Расширения CSS3

Использование простых, но эффективных расширений, таких как свойства border-radius и box-shadow позволяет придать обычному прямоугольнику всплывающего сообщения новый и симпатичный вид.

Что у нас под капотом?

Начнём с кода HTML для нашего примера.

различные типы всплывающих подсказок

Для того, чтобы дать вам достаточно идей для ваших собственных проектов, мы сделаем пять различных типов всплывающих подсказок.

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


Вот так замечательно могут выглядеть всплывающие подсказки, значительно лучше, чем то что возможно по умолчанию!

Кросс-браузерная совместимость

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

Основная разметка

В коде, который приведен ниже, мы используем универсальный шаблон XHTML 1.0 с обычным элементом .

Так как мы используем CSS для построения наших элементов, то с целью обучения CSS встроен в документ с помощью тега

Содержимое всплывающих подсказок удаляется из поля зрения с помощью негативного значения свойства margin-left , а не display: none или visibility: hidden , так как некоторые программы для чтения с экрана игнорируют указанные свойства.

Стили CSS придают странице тот вид, который нужен.

Стили CSS для всплывающих подсказок

На данном этапе ссылки не имеют установок для вывода всплывающих подсказок при наведении курсора мыши.

Вскоре мы установим функционирование всплывающих подсказок для одинакового отображения в различных браузерах. А сейчас добавим несколько строк кода CSS.

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

CSS для отображения всплывающей подсказки

Необходимость строки * html

У вас может возникнуть вопрос, для чего включена последняя строка в выше приведённом коде? Она устанавливает прозрачность для фона сслыки. Во время тестирования всплывающих подсказок выявился странный эффект в IE6, который не поддавался удалению до тех пор, пока существовал фон ссылки!

Всплывающие подсказки начали работать, а оформление добавим позже!

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

Задаём цветовую схему для всплывающих подсказок/

Ниже приведённый код задаёт для каждого из пяти стилей всплывающих подсказок цветовую схему.

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

Код CSS для цветовой схемы

Код CSS очень прост, но он придаёт отличный вид всплывающим подсказкам и выполняет свою функцию везде. Цветовую схему можно поменять по своему усмотрению.

Несколько штрихов CSS3 для продвинутого отображения всплывающих подсказок

Перед тем, как закончить урок, вставим несколько строк кода CSS3 для придания ввизуальных эффектов нашим всплывающим подсказкам. Установим скруглённые углы с помощью свойства border-radius и придадим объёмности с помощью свойства box-shadow .

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

Стили придают всплывающим подсказкам замечательный вид и уникальность!

Добавим ниже приведённый код в селектор .tooltip:hover span и обновим страницу.

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

Вы можете заметить, что используются не только официальные свойства CSS3, но и расширения для Mozilla и WebKit.

Дополнительные свойства CSS для новых браузеров

Используем свойства CSS3.


Резюме

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: sixrevisions.com/css/css-only-tooltips/
Перевел: Сергей Фастунов
Урок создан: 2 Августа 2010
Просмотров: 166523
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

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

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Несложная всплывающая подсказка на CSS

Всем привет! Сегодня мы рассмотри еще один интеренсый пример всплывающей подсказки. Основным плюсом будет: не сложная реалиация кода и коментарий в css файле для быстрого разбора и редактирования.

Смотреть примерСкачать

Текстовая всплывающая подсказка:

Всплывающая подсказка с сылкой:

Всплывающая подсказка с картинкой:

Похожие статьи на эту тему:

А сейчас опишу процесс установки всплывающей подсказки по шагам.

Руководство по всплывающим подсказкам (Tooltips)

Всплывающие подсказки (Tooltips) – это сообщения, инициируемые пользователем, которые предоставляют дополнительную информацию об элементе или функции страницы. Хотя всплывающие подсказки для Интернета не в новинку, зачастую они неправильно применяются.

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

Читайте также:

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

(Если вам интересно, что такое наведение курсора клавиатурой: чтобы получить доступ к активным элементам на странице, пользователи обычно могут перемещать на них мышь или перемещаться по ним с помощью клавиатуры. Наведение клавиатурой означает сохранение фокуса клавиатуры на том же элементе).

Подсказки могут быть прикреплены к любому активному элементу на странице (иконки, текстовые ссылки, кнопки и т. д.). Они описывают или объясняют элемент. Таким образом, всплывающие подсказки очень контекстуальны и специфичны и не объясняют общую картину или весь поток задач.

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

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


Всплывающие подсказки (Tooltips) vs. Подсказки в диалоговом окне (Popup Tips)

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

Всплывающие подсказки Диалоговое окно с подсказкой
Тип сайта Десктопный Любой
Что вызывает Наведение курсора (при помощи мыши или клавиатуры) Касание/клик
Когда закрывается Пользователь покидает предопределенную область взаимодействия Пользователь нажимает, чтобы закрыть или нажимает на другую область экрана
Связанный элемент Иконка, текстовая ссылка, кнопка, изображение “?” или иконка “i”
Тип контента Микроконтент Микроконтент

Эта статья будет посвящена всплывающим подсказкам и их использованию на десктопных сайтах.

Руководство по использованию всплывающей подсказки

1. Не используйте всплывающие подсказки для информации, которая имеет жизненно важное значение для выполнения задачи

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

Не делайте:

На веб-сайте Amtrak требования к паролю указаны во всплывающей подсказке (доступ к которой осуществляется при наведении мыши). Этот тип информации важен, чтобы пользователь, успешно завершил процесс создания аккаунта, и поэтому всегда должен присутствовать на экране.

Делайте:

FedEx использовал всплывающие подсказки, чтобы предоставить дополнительную информацию для полей формы доставки. Например, в поле «Электронная почта» была всплывающая подсказка, объясняющая, почему это поле было указано в списке. (Доступ к этой подсказке осуществлялся при наведении курсора мыши).

2. Предоставьте во всплывающей подсказке краткий и полезный контент

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

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

Не делайте:

На веб-сайте Sprint кнопка с надписью: «Добавить новую строку» также имела всплывающую подсказку с текстом «Добавить новую строку». Подобная подсказка попросту не нужна.

Делайте:

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

3. Поддерживайте наведение курсора, как мышью, так и клавиатурой

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

Не делайте:

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

Делайте:

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

4. Используйте стрелки для всплывающей подсказки, когда несколько элементов находятся рядом

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

Не делайте:

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

Делайте:

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

5. Используйте подсказки последовательно по всему сайту


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

Не делайте:

Веб-сайт Business Insider в своем меню навигации использовал всплывающие подсказки для 2 из 3 иконок. (Примечание. На главной странице веб-сайта Business Insider иконка глобуса имела всплывающую подсказку с надписью «Значок глобуса». Однако подпись не была полезной и не указывала на ее функциональность: выбор языка). В общем, мы не рекомендуем использовать иконки без подписей и скрывать подписи внутри всплывающих подсказок, но эта ошибка становится еще серьезнее, если подписи всплывающих подсказок развернуты непоследовательно.

Делайте:

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

Дополнительные рекомендации

  • Предоставляйте всплывающие подсказки дляиконокбез подписей.

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

  • Убедитесь, что подсказки имеют умеренныйконтрастпо отношению к фону.

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

  • Размещайте всплывающие подсказки так, чтобы они не блокировали связанный контент.

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

Вывод

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

Чем больше мы стремимся к минимализму, тем больше подсказок нам понадобится, и тем больше работы для наших пользователей. В следующий раз, когда вы будете думать использовать всплывающую подсказку или нет, спросите себя: нужна ли информация во всплывающей подсказке пользователям для выполнения задачи? Если ответ «нет», подсказка уместна. В противном случае информация должна присутствовать на экране.

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Заставить всплывающую подсказку, как это делает альтернативный текст

Кажется, у меня есть противоположная проблема, с которой сталкивается большинство людей: у меня есть «всплывающая подсказка» -esque div внутри table , и я бы хотел, чтобы она покинула сам стол, как title элемент делает:

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

Я пробовал совмещать с существующими элементами, которые могут появиться за столом, но не смог понять семантику :before и :after . Я также попытался изменить z-индекс tooptip (и всех других элементов), но это не дало заметного эффекта. Поэтому вместо этого я написал решение javascript, чтобы обернуть рассматриваемые элементы с помощью div , который вызывает всплывающую подсказку, когда вместо этого они наводятся. Похоже, это работает нормально; теперь мне просто нужна всплывающая подсказка, которая появляется за пределами родительского контейнера.

Могу ли я получить всплывающую подсказку, как альтернативный текст? В качестве альтернативы, я могу стилизовать альтернативный текст?

HTML всплывающий текст при наведении / нажатии на текст

Здравствуйте!
Нужно сделать так, что бы при наведении или нажатии на текст всплывал другой текст, на подобии подсказки.
Как это сделать?

Добавлено через 50 секунд
При нажатии на текст ниже появлялся другой. Как бы скрытый текст

19.09.2015, 15:05

Всплывающий текст при наведении на фото
Ситуация такова. на сайте есть раздел контакты, в нем фото всех сотрудников. Задумка такая, хочу.

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

Всплывающий текст при наведении курсора мыши на изображение
Требуется, чтобы при наведении курсора мыши на изображение появлялся «всплывающий текст». Какие.

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

Илон Маск рекомендует:  Что такое код ftell
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL