Html tooltip: How to Create an HTML Tooltip [+ Code Templates]

Как создать всплывающую подсказку в формате HTML [+ Шаблоны кода]

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

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

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

Что такое всплывающая подсказка в HTML?

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

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

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

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

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

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

Чтобы сделать простую всплывающую подсказку, мы сначала создадим элемент HTML, который вызывает всплывающую подсказку при наведении курсора. Мы создадим этот элемент как div и назначим ему класс hover-text .

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

Далее мы создадим сам элемент всплывающей подсказки. Это будет элемент span с классом tooltip-text . Поместите этот элемент внутрь div hover-text , чтобы связать элемент всплывающей подсказки с родительским div.

 
 
наведите меня 
     Я всплывающая подсказка! 
 
 
 

Наконец, мы применим CSS к нашим элементам, чтобы задать поведение всплывающей подсказки. Самое главное, мы скрываем класс tooltip-text с видимостью : hidden и размещаем его на слое над другим содержимым страницы с z-index: 1 . Мы также будем использовать псевдокласс hover для hover-text , чтобы отображать всплывающую подсказку только тогда, когда происходит событие наведения.

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

См. всплывающую подсказку Pen HTML: пример от HubSpot (@hubspot) на CodePen.

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

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

Чтобы добавить стрелку во всплывающую подсказку, вы можете использовать ::до . Это создает псевдоэлемент, который является первым дочерним элементом элемента, к которому он прикреплен (в данном случае элементы с классом tooltip-text ).

Этот новый псевдоэлемент, по сути, представляет собой пустой элемент с некоторыми отступами, повернутый на 90 градусов и расположенный таким образом, что всплывающая подсказка выглядит как речевой пузырь. Также обратите внимание, что z-индекс tooltip-text установлен на 2 . Это гарантирует, что наш псевдоэлемент всегда будет отображаться за всплывающей подсказкой и не затенит текст всплывающей подсказки.

См. всплывающую подсказку Pen HTML: пример со стрелками от HubSpot (@hubspot) на CodePen.

Как добавить эффекты к всплывающим подсказкам

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

Чтобы всплывающая подсказка появлялась и исчезала из поля зрения, мы будем использовать свойство непрозрачности CSS в сочетании со свойством перехода CSS. Непрозрачность всплывающей подсказки-текста изначально установлена ​​​​на 0 , что означает, что элемент невидим. Когда происходит событие наведения, его непрозрачность устанавливается на 1 , а переход : непрозрачность 0,5 с добавляет эффект плавного появления/исчезновения. Вы можете изменить продолжительность перехода по своему усмотрению.

Также распространено добавление задержки к всплывающим подсказкам — она предотвращает появление всплывающей подсказки каждый раз, когда курсор проходит над элементом. Чтобы добавить задержку к вашему переходу, используйте свойство transition-delay вместе с переход свойство. Вы можете установить продолжительность задержки по своему усмотрению.

Оба эффекта показаны в примере ниже:

См. всплывающую подсказку Pen HTML: пример с эффектами от HubSpot (@hubspot) на CodePen.

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

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

Попробуйте навести курсор на изображение в примере ниже:

См. всплывающую подсказку Pen HTML: пример изображения от HubSpot (@hubspot) на CodePen.

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

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

Подсказка Pure CSS (источник):

См. всплывающую подсказку Pen Pure CSS от Rude (@rudeayelo) на CodePen.

Иконки социальных сетей с всплывающими окнами (источник):

См. Pen Иконки социальных сетей с всплывающими окнами (только HTML + чистый CSS) от Abdelrhman Said (@abdelrhmansaid) на CodePen.

Концепция анимированной всплывающей подсказки CSS (источник):

См. концепцию анимированной всплывающей подсказки CSS от Sasha (@sashatran) на CodePen.

Советы по использованию всплывающих подсказок HTML

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

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

Всплывающие подсказки · Bootstrap v5.0

Обзор

Что нужно знать при использовании плагина всплывающей подсказки:

• Всплывающие подсказки полагаются на стороннюю библиотеку Popper для позиционирования. Вы должны включить popper.min.js перед bootstrap.js или использовать bootstrap.bundle.min.js / bootstrap.bundle.js , который содержит Popper, чтобы всплывающие подсказки работали!
• Всплывающие подсказки добавляются по соображениям производительности, поэтому вы должны инициализировать их самостоятельно .
• Подсказки с заголовками нулевой длины никогда не отображаются.
• Укажите container: 'body' , чтобы избежать проблем с рендерингом в более сложных компонентах (таких как наши группы ввода, группы кнопок и т. д.).
• Не работают всплывающие подсказки для скрытых элементов.
• Всплывающие подсказки для .disabled или disabled элементов должны активироваться на элементе-оболочке.
• При срабатывании гиперссылок, охватывающих несколько строк, всплывающие подсказки будут располагаться по центру. Используйте пробел : nowrap; на , чтобы избежать такого поведения.
• Всплывающие подсказки должны быть скрыты до того, как соответствующие им элементы будут удалены из модели DOM.
•  Подсказки могут быть вызваны благодаря элементу внутри теневого DOM.

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

Все понял? Отлично, давайте посмотрим, как они работают, на нескольких примерах.

Пример: включить всплывающие подсказки везде

Один из способов инициализировать все всплывающие подсказки на странице — выбрать их по data-bs-toggle атрибут:

 var tooltipTriggerList = []. slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map (функция (tooltipTriggerEl) {
  вернуть новый bootstrap.Tooltip(tooltipTriggerEl)
})
 

Примеры

Наведите указатель мыши на ссылки ниже, чтобы увидеть всплывающие подсказки:

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

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

 
  Подсказка вверху


  Подсказка справа


  Подсказка внизу

 
  Подсказка слева

 

И с добавлением пользовательского HTML:

 
  Подсказка с HTML

 

С SVG:

Sass

Переменные

 $tooltip-font-size: $font-size-sm;
$всплывающая подсказка-максимальная ширина: 200px;
$цвет всплывающей подсказки: $белый;
$tooltip-bg: $черный;
$всплывающая подсказка-граница-радиус: $граница-радиус;
$ всплывающая подсказка-непрозрачность: . 9;
$tooltip-padding-y: $spacer * .25;
$tooltip-padding-x: $spacer * .5;
$всплывающая подсказка: 0;
$tooltip-стрелка-ширина: .8rem;
$tooltip-стрелка-высота: .4rem;
$tooltip-arrow-color: $tooltip-bg;
 

Использование

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

Активировать всплывающую подсказку через JavaScript:

 var exampleEl = document.getElementById('example')
var tooltip = новый bootstrap.Tooltip(exampleEl, options)
 

Переполнение

авто и прокрутка

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

переполнение: прокрутка , как наш .table- отзывчивый , но все равно сохраняет оригинал позиционирование размещения. Чтобы решить эту проблему, установите для параметра border (для модификатора flip, использующего параметр popperConfig ) любой HTMLElement, чтобы переопределить значение по умолчанию, 'clippingParents' , например document. body :

 var exampleEl = document.getElementById('example')
var tooltip = новый bootstrap.Tooltip (exampleEl, {
  граница: document.body // или document.querySelector('#boundary')
})
 

Разметка

Необходимая разметка для всплывающей подсказки — это только атрибут данных и заголовок в элементе HTML, для которого вы хотите иметь всплывающую подсказку. Генерируемая разметка всплывающей подсказки довольно проста, хотя для нее требуется позиция (по умолчанию установлено значение 9).0146 сверху плагином).

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

Вы должны добавлять всплывающие подсказки только к элементам HTML, которые традиционно являются интерактивными и ориентированными на клавиатуру (такими как ссылки или элементы управления формы). Хотя произвольные элементы HTML (такие как s) можно сделать фокусируемыми, добавив атрибут tabindex="0" , это добавит потенциально раздражающие и запутанные позиции табуляции для неинтерактивных элементов для пользователей клавиатуры, и большинство вспомогательные технологии в настоящее время не объявляют всплывающую подсказку в этой ситуации. Кроме того, не полагайтесь только на наведите курсор на в качестве триггера для вашей всплывающей подсказки, так как это сделает ваши всплывающие подсказки невозможными для пользователей клавиатуры.

 
Наведите курсор на меня


  <дел>
  <дел>
    Какой-то текст всплывающей подсказки!