Как создать всплывающую подсказку в формате 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 Popover при наведении — бесплатные примеры
Popover при наведении
Отзывчивое всплывающее окно при наведении, созданное с помощью Bootstrap 5. Примеры пользовательского HTML, направлений, изображений и многого другого.
Чтобы узнать больше, прочитайте Popover Docs.
Базовый пример
Чтобы всплывающее окно работало на
hover просто измените значение атрибута data-mdb-trigger на "hover" .
Показать код Изменить в песочнице
<изображение
src="https://mdbcdn.
b-cdn.net/img/new/standard/city/041.webp"
alt="Голливудский знак на холме"
data-mdb-toggle="всплывающее окно"
title="Заголовок всплывающего окна"
data-mdb-content="А вот и потрясающий контент. Он очень увлекательный. Верно?"
данные-mdb-триггер = «зависание»
/>
Четыре направления
Чтобы всплывающее окно работало на
hover просто измените значение атрибута data-mdb-trigger на "hover" .
Показать код Изменить в песочнице
<кнопка
тип = "кнопка"
data-mdb-контейнер = "тело"
data-mdb-toggle="всплывающее окно"
размещение данных mdb = "сверху"
data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
"
данные-mdb-триггер = «зависание»
>
Поповер сверху
<кнопка
тип = "кнопка"
data-mdb-контейнер = "тело"
data-mdb-toggle="всплывающее окно"
размещение данных mdb = "право"
data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
данные-mdb-триггер = «зависание»
>
Поповер справа
<кнопка
тип = "кнопка"
data-mdb-контейнер = "тело"
data-mdb-toggle="всплывающее окно"
data-mdb-размещение = «внизу»
data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
данные-mdb-триггер = «зависание»
>
Поповер внизу
<кнопка
тип = "кнопка"
data-mdb-контейнер = "тело"
data-mdb-toggle="всплывающее окно"
размещение данных mdb = "слева"
data-mdb-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
"
данные-mdb-триггер = «зависание»
>
Поповер слева
Пользовательский HTML при наведении
Если вы хотите добавить html-контент во всплывающее окно, добавьте атрибут data-mdb-html="true" к элементу.
а затем вы можете добавить html-код в атрибут data-mdb-content . Вы также можете сделать это через
JavaScript. Посмотрите, как это сделать здесь.
Показать код Изменить в песочнице
<кнопка
тип = "кнопка"
data-mdb-toggle="всплывающее окно"
data-mdb-content="- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
Изображение при наведении
Чтобы сделать изображение при наведении во всплывающем окне, просто вставьте изображение как
элемент HTML в data-mdb-html в верно .
