Как сделать всплывающую подсказку в html: Всплывающая подсказка | WebReference

Всплывающая подсказка : Tooltip : UIkit 2

Легко создать красивую всплывающую подсказку.

• Создание Tooltip
• Выравнивание Tooltip
• Анимация и смещение
• Параметры JavaScript

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

Чтобы использовать компонент «Всплывающая подсказка», добавьте атрибут data-uk-tooltip к элементу. Вам также нужно добавить атрибут title, значение которого будет отражать текст вашей подсказки при наведении курсора на элемент.

Пример

Здесь есть что-то наведите на меня!

Разметка

<button data-uk-tooltip title="">...</button>
<span data-uk-tooltip title="">...</span>

---

Выравнивание. Позиция

Добавьте один из следующих параметров в атрибут data-uk-tooltip, чтобы настроить выравнивание всплывающей подсказки.

Атрибут	Описание	Пример
pos:'top'	Выравнивает подсказку по верху.
pos:'top-left'	Выравнивает подсказку по левому верхнему краю.
pos:'top-right'	Выравнивает всплывающую подсказку справа вверху.
pos:'bottom'	Выравнивает всплывающую подсказку по нижнему краю.
pos:'bottom-left'	Выравнивает всплывающую подсказку слева внизу.
pos:'bottom-right'	Выравнивает всплывающую подсказку справа внизу.
pos:'left'	Выравнивает всплывающую подсказку по левому краю.
pos:'right'	Выравнивает всплывающую подсказку по правому краю.

Разметка

<button data-uk-tooltip="{pos:'bottom-left'}" title="">...</button>

---

Анимация и смещение

Пример

Разметка

<span data-uk-tooltip="{animation:true, offset: 45}" title="">...</span>

---

Параметры JavaScript

Это пример того, как установить параметры через атрибут:

data-uk-tooltip="{pos:'bottom-left'}"

Option	Possible value	Default	Описание
offset	integer	5	Смещение
pos	string	‘top’	Положение/позиция всплывающей подсказки
animation	boolean	false	Анимаци — эффект «Fade»
delay	integer	0	Задержка отображения всплывающей подсказки в мс
cls	string	»	Пользовательский класс, добавляемый при открытии
activeClass	string	‘uk-active’	Toggled active class

---

Подсказки.

Компоненты · Bootstrap. Версия v4.6

Cмотреть на GitHub

Документация и примеры добавления настраиваемых всплывающих подсказок Bootstrap с CSS и JavaScript, использует CSS3 для анимации, и атрибуты данных для хранения локальных заголовков.

Обзор

Вот что надо знать перед началом работы с плагином подсказок:

• Подсказки зависят от 3-й части библиотеки Popper.js в части позиционирования. Вы должны подключать popper.min.js или использовать bootstrap.bundle.min.js / bootstrap.bundle.js, содержащие Popper.js – это нужно для работы подсказок!
• Если вы подключаете файлы JavaScript с жесткого диска, вам нужна requires util.js.
• Подсказки не инициализируются и не используются по умолчанию по причинам производительности, так что вам надо сделать это самому.
• Подсказки с названием нулевой длины никогда не отображаются.
• Задайте container: 'body' чтобы избежать проблем с отрисовкой более сложных компонентов (таких как группы ввода, кнопок и т.д.).
• Нельзя запускать подсказки из скрытых элементов.
• Подсказки для элементов класса .disabled или с атрибутом disabled должны запускаться из элемента-«обертки».
• Когда подсказка запускается из многострочных ссылок, подсказки будут центрированы. Используйте white-space: nowrap; в ваших <a>, чтобы избежать этого.
• Подсказки должны быть спрятаны до того, как связанные с ними элементы удалены из DOM.

Вы всё поняли? Отлично, посмотрим, как это работает на конкретных примерах.

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

Один из способов инициализировать все подсказки на странице – обратиться к ним по атрибуту data-toggle:

$(function () {
  $('[data-toggle="tooltip"]'). tooltip()
})

Примеры

Наведите курсор на ссылки – увидите подсказку:

Tight pants next level keffiyeh you probably haven’t heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney’s fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney’s cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

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

<button type="button" data-toggle="tooltip" data-placement="top" title="Подсказка вверху">
  Подсказка вверху
</button>
<button type="button" data-toggle="tooltip" data-placement="right" title="Подсказка справа">
  Подсказка справа
</button>
<button type="button" data-toggle="tooltip" data-placement="bottom" title="Подсказка снизу">
  Подсказка снизу
</button>
<button type="button" data-toggle="tooltip" data-placement="left" title="Подсказка слева">
  Подсказка слева
</button>

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

<button type="button" data-toggle="tooltip" data-html="true" title="<em>Всплывающая подсказка</em> <u>с</u> <b>HTML</b>">
  Всплывающая подсказка с HTML
</button>

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

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

Запустите подсказку через JavaScript:

$('#example').tooltip(options)

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

auto и scroll

Положение всплывающей подсказки пытается автоматически измениться, если у родительского контейнера переполнение overflow: auto или overflow: scroll как наш .table-responsive, но при этом сохранит исходное положение размещения. Для решения проблемы, установите для параметра boundary любое значение, отличное от значения по умолчанию

'scrollParent', например 'window':

$('#example').tooltip({ boundary: 'window' })

Разметка

Для использования подсказок требуется лишь атрибут data и title в том элементе HTML, который вы хотите оснастить подсказкой. Генерированная разметка подсказки – проще, хотя и требует установить позицию (по умолчанию позиция задается плагином как top).

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

Следует добавлять подсказки лишь в те элементы HTML, которые традиционно рассматриваются как пригодные для фокусировки с клавиатуры и интерактивные (такие как ссылки или органы управления форм). Хотя произвольные элементы HTML (такие как

<span>) можно оснастить той же возможностью – добавив атрибут tabindex="0" – это привнесет надоедливые баги при работе c не –интерактивными элементами с клавиатуры. Плюс – большинство вспомогательных технологий в настоящее время не объявляют и не видят содержимое подсказки в такой ситуации.

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

<!-- HTML для записи -->
<a href="#" data-toggle="tooltip" title="Текст всплывающей подсказки!">Наведите на меня</a>

<!-- Разметка, созданная плагином -->
<div role="tooltip">
  <div></div>
  <div>
    Текст всплывающей подсказки!
  </div>
</div>

Дезактивированные элементы

Элементы с атрибутом disabled не есть интерактивные, что означает, что подсказка (или поповер) не возникнут при фокусировании, наведении или клике на них юзеров. Как полумера в решении этого вопроса – можно запустить подсказки из оборачивающего элемента <div> или <span>, в идеале придав им возможность фокусировки с клавиатуры атрибутом tabindex="0", и т.о. преодолев событие pointer-events в дезактивированном элементе.

<span tabindex="0" data-toggle="tooltip" title="Отключенная подсказка">
  <button type="button" disabled>Отключенная кнопка</button>
</span>

Параметры

Параметры можно передавать через атрибуты или JavaScript. С атрибутами: добавьте название атрибута к data-, как в data-animation="".

Обратите внимание, что по соображениям безопасности параметры sanitize, sanitizeFn и whiteList не могут быть предоставлены с использованием атрибутов данных.

Название	Тип	Умолчание	Описание
animation	boolean	true	Применяет CSS-переход к подсказке
container	string | element | false	false	Добавляет подсказку к выбранному элементу. Пример: container: 'body'. Эта опция полезна в том, что в «потоке» документа позволяет позиционировать подсказку рядом с ее триггером — что предотвратит подсказку от «сползания» при изменении размера окна.
delay	number | object	0	Откладывает показ и скрытие подсказки (мс) – не применяется к ручному типу триггера Если цифра поддерживается, задержка применяется к обоим hide/show Структура объекта: delay: { "show": 500, "hide": 100 }
html	boolean	false	Позволяет вставлять HTML в подсказку. Если true, тэги HTML в title подсказки будут отрисованы в подсказке. Если false – метод jQuery text будет использован для вставки содержимого в DOM. Используйте текст, если вы беспокоитесь о XSS-атаках.
placement	string | function	‘top’	Как позиционируется всплывающая подсказка – авто – верх – низ – лево – право. Когда задано auto, это автоматически переориентирует подсказку. Когда функция используется для определения расположения, она вызывается с узлом всплывающей подсказки DOM как его первый аргумент и триггер-элемент узла DOM – как второй. Контекст this задается для экземпляра всплывающей подсказки.
selector	string | false	false	Если селектор задан, объекты всплывающих подсказок будут «нацелены» на определенные «цели». На практике это используется для активации динамического содержимого HTML для возможности добавления поповеров. Смотри это и еще.
template	string	'<div role="tooltip"><div></div><div></div></div>'	Обычный HTML для использования при создании всплывающих подсказок. title всплывающей подсказки будет введен в элемент класса .tooltip-inner Элемент класса .arrow станет стрелочкой всплывающей подсказки. Самый внешний оборачивающий элемент должен иметь класс .tooltip и role="tooltip".
title	string | element | function	»	Название по умолчанию, если атрибут title не задан. Если функция задана, она будет вызываться с ее набором this, к которому прикреплена всплывающая подсказка.
trigger	string	‘hover focus’	Задает, как вызывается подсказка — click | hover | focus | manual. Вы можете назначить много триггеров, разделите их пробелом. 'manual' означает, что подсказка будет запрограммировано запущена методами . tooltip('show'), .tooltip('hide') and .tooltip('toggle'), это значение нельзя сочетать с любым другим триггером. 'hover' сам по себе приведет к созданию подсказок, которые нельзя запустить с клавиатуры, и должны будут использоваться лишь, если другие методы для выдачи информации из подсказки для юзеров клавиатуры невозможны.
offset	number | string | function	0	Смещение всплывающей подсказки относительно цели. Когда функция используется для определения смещения, она вызывается с объектом, содержащим данные смещения в качестве первого аргумента. Функция должна возвращать объект с такой же структурой. Узел DOM запускающего элемента передается в качестве второго аргумента. Дополнительную информацию смотрите документации Popper по смещению.
fallbackPlacement	string | array	‘flip’	Разрешить указать, какую позицию Popper будет использовать при откате. Для получения дополнительной информации смотрите документацию о поведении Popper.
customClass	string | function	»	Добавляйте классы во всплывающую подсказку, когда она отображается. Обратите внимание, что эти классы будут добавлены в дополнение к любым классам, указанным в шаблоне. Чтобы добавить несколько классов, разделите их пробелами: 'a b'. Вы также можете передать функцию, которая должна возвращать одну строку, содержащую дополнительные имена классов.
boundary	string | element	‘scrollParent’	Граница ограничения переполнения всплывающей подсказки. Принимает значения 'viewport', 'window', 'scrollParent' или ссылку HTMLElement (только JavaScript). Дополнительную информацию смотрите документацию preventOverflow Popper.
sanitize	boolean	true	Включите или отключите очистку. Если активированы параметры 'template' и 'title', будут очищены.
whiteList	object	Значение по умолчанию	Объект, содержащий разрешенные атрибуты и теги
sanitizeFn	null | function	null	Здесь Вы можете предоставить свою собственную функцию офистки. Это может быть полезно, если Вы предпочитаете использовать специальную библиотеку для выполнения очистки.
popperConfig	null | object	null	Чтобы изменить конфигурацию Popper по умолчанию для Bootstrap, смотрите конфигурацию Popper.

Методы

Асинхронные методы и переходы

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

Смотрите документацию.

$().tooltip(options)

Прикрепляет обработчик подсказки к коллекции элементов.

.tooltip('show')

Показывает всплывающую подсказку элемента. Возвращается к функции-вызову до того, как модальный элемент показан (т.е. до того, как произойдет событие shown.bs.tooltip). Расценивается как «мануальный» запуск подсказки. Подсказки с названием нулевой длины никогда не отображаются.

$('#element').tooltip('show')

.tooltip('hide')

Скрывает подсказку элемента. Возвращается к функции-вызову до того, как модальный элемент скрыт (т.е. до того, как произойдет событие hidden. bs.tooltip). Это расценивается «мануальным» запуском подсказки.

$('#element').tooltip('hide')

.tooltip('toggle')

Изменяет состояние подсказки элемента. Возвращается к функции-вызову до того, как модальный элемент показан или скрыт (т.е. до того, как события shown.bs.tooltip or hidden.bs.tooltip наступят). Расценивается как «мануальный» запуск подсказки.

$('#element').tooltip('toggle')

.tooltip('dispose')

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

$('#element').tooltip('dispose')

.tooltip('enable')

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

$('#element').tooltip('enable')

.tooltip('disable')

Лишает подсказку элемента возможности быть показанной. Подсказка будет доступна к показу только если она будет ре-активирована.

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

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

$('#element').tooltip('toggleEnabled')

.tooltip('update')

Обновляет позицию подсказки элемента.

$('#element').tooltip('update')

События

Тип	Описание
show.bs.tooltip	Это событие наступает немедленно, когда экземпляр метода show вызван.
shown.bs.tooltip	Это событие наступает, когда подсказка стала видимой юзеру (будет ждать завершения переходов CSS).
hide.bs.tooltip	Это событие наступает немедленно, когда экземпляр метода hide вызван.
hidden.bs.tooltip	Это событие наступает, когда подсказка только что прекратила быть скрытой от юзера (будет ждать завершения переходов CSS).
inserted.bs.tooltip	Это событие наступает после события show.bs.tooltip, когда шаблон подсказки добавлен в DOM.

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // сделайте что-нибудь...
})

Научитесь создавать всплывающую подсказку на чистом CSS

Верх
Текст всплывающей подсказки

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

Нижний
Подсказка text

Left
Текст всплывающей подсказки

TL;DR – всплывающая подсказка CSS относится к всплывающее сообщение, которое появляется после наведения мыши или когда элементы получают фокус клавиатуры. Он исчезает при выходе из мыши или когда элемент теряет фокус клавиатуры.

Содержание

• 1. Создание всплывающих подсказок с помощью CSS
• 1.1. Шаги для создания всплывающей подсказки на чистом CSS
• 2. Позиционирование
• 2.1. Правая подсказка
• 2.2. Левая подсказка
• 2.3. Верхняя подсказка
• 2.4. Нижняя подсказка
• 3. Создание стрелки
• 4. Анимация плавного перехода
• 5. Подсказка CSS: полезные советы

Создание всплывающей подсказки с помощью CSS

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

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

Пример

 . tooltip { /* Контейнер для всплывающей подсказки */
положение: родственник;
    отображение: встроенный блок;
}

.tooltip .tooltiptext { /* Это текст всплывающей подсказки */
видимость: скрытая;
ширина: 100 пикселей;
цвет фона: #8512d5;
белый цвет;
выравнивание текста: по центру;
отступ: 10 пикселей;
радиус границы: 10px; /* Это определяет положение текста всплывающей подсказки */
положение: абсолютное;
 z-индекс: 1;
}

.tooltip:hover .tooltiptext { /* Делает текст всплывающей подсказки видимым при наведении на текст */
видимость: видимая;
}
 

Попробуйте вживую. Учитесь на Udacity

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

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

Шаги по созданию всплывающей подсказки на чистом CSS

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

• Мы устанавливаем позицию на относительно элемента с классом всплывающей подсказки .
• Мы position текст внутри всплывающей подсказки с position: absolute .
• Элемент с классом tooltiptext содержит текст внутри всплывающей подсказки. Он скрыт до тех пор, пока не сработает :hover .
• CSS стилизует всплывающую подсказку HTML, указывая ее ширину и цвет фона.
• Текст внутри всплывающей подсказки центрирован по и имеет определенные настройки заполнения.
• Радиус границы закругляет углы всплывающей подсказки HTML.

Позиционирование

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

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

Правая всплывающая подсказка
Текст всплывающей подсказки

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

Пример

 .tooltip-ex-right {
    верх: -5px;
    слева: 125%;
} 

Попробуйте вживую. Учитесь на Udacity

Совет: мы используем top: -5px , чтобы переместить всплывающую подсказку CSS на ту же высоту , что и контейнер.

Увеличив отступ , вам может потребоваться увеличить значение  top свойство, чтобы оно оставалось по центру по вертикали.

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

Подсказка слева
Текст подсказки

Создание всплывающей подсказки HTML на стороне слева включает использование справа с позицией : относительный .

Пример

 .tooltip .tooltiptext {
верх: -10px;
справа: 110%;
} 

Попробуйте живое обучение на Udacity

Pros

• Простота в использовании благодаря подходу «обучение на практике»
• Предлагает качественный контент
• Геймифицированный опыт кодирования в браузере
• Цена соответствует качеству
• Подходит для начинающих ner to advanced

Основные характеристики

• Бесплатные сертификаты об окончании
• Ориентированы на навыки работы с данными
• Гибкий график обучения

ЭКСКЛЮЗИВ: СКИДКА 50%

Pros

• Простой дизайн (без лишней информации)
• Качественные курсы (даже бесплатные)
• Разнообразие функций

Основные характеристики

• Программы наностепени
• Подходит для предприятий
• Платные сертификаты об окончании

СКИДКА 15%

Плюсы

• Удобная навигация
• Никаких технических проблем
• Кажется, заботится о своих пользователях

Основные характеристики

• Огромное разнообразие курсов
• 30-дневная политика возврата средств
• Бесплатные сертификаты об окончании

AS ОТ 14,99 $

Верхняя подсказка

Top Tooltip
Текст всплывающей подсказки

В следующем примере HTML-подсказка добавляется вверху элемента:

Example

 . tooltip .tooltiptext {
ширина: 100 пикселей;
низ: 100%;
    слева: 50%;
 поле слева: -50px; /* Это делает отступ равным половине ширины к центру */
} 

Попробуйте вживую. Учитесь на Udacity

Примечание. мы используем свойство margin-left с -60 to center во всплывающей подсказке.

Нижняя всплывающая подсказка
Текст всплывающей подсказки

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

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

Пример 90 006

 .tooltip .tooltiptext {
ширина: 100 пикселей;
верх: 100%;
слева: 50%;
 поле слева: -50px; /* Это делает отступ равным половине ширины к центру */
} 

Попробуйте Live Learn на Udacity

Совет: не забудьте включить margin-left и установить его значение на -60 , чтобы центрировать всплывающую подсказку.

Создание стрелки

Вы можете создать стрелки для всплывающих подсказок в CSS, объединив псевдоэлемент ::after с пустым свойством content . В результате всплывающая подсказка напоминает всплывающую подсказку.

Пример

 .tooltip .tooltiptext::после {
содержание: " ";
положение: абсолютное;
верх: 100%; /* Это поместит стрелку в нижнюю часть всплывающей подсказки */
слева: 50%;
поле слева: -10px;
   ширина границы: 10px;
стиль границы: сплошной;
цвет границы: черный прозрачный прозрачный прозрачный; /* Это сделает верхнюю границу черной*/
} 

Попробуйте Live Learn на Udacity

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

• нет уникальных свойств для создания стрелок для всплывающих подсказок. Поэтому мы будем использовать свойство границы.
• Нам нужно расположить стрелку внизу , установив top: 100% .
• слева:50% часть кода центрирует всплывающую подсказку.
• Ширина границы устанавливает размер стрелки . Если вы измените размер, вам также необходимо изменить margin-left , чтобы стрелка оставалась в центре.
• Цвет рамки устанавливает цвет стрелки . Вы должны определить только верхнюю границу и оставить остальные границы прозрачными .
• Вы должны установить стиль границы , чтобы определить, как выглядит граница. В примере используется сплошное значение .

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

Пример

 .tooltip .tooltiptext::after {
содержание: " ";
положение: абсолютное;
низ: 100%; /* Это поместит стрелку в верхнюю часть всплывающей подсказки */
слева: 50%;
поле слева: -10px;
    ширина границы: 10px;
стиль границы: сплошной;
цвет границы: прозрачный прозрачный черный прозрачный; /* Это сделает верхнюю границу черной */
} 

Попробуйте живое обучение на Udacity

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

Пример

 . tooltip .tooltiptext::after {
содержание: " ";
положение: абсолютное;
верх: 50%;
справа: 100%; /* Это поместит стрелку слева от всплывающей подсказки */
верхнее поле: -10px;
ширина границы: 10px;
стиль границы: сплошной;
цвет границы: прозрачный черный прозрачный прозрачный; /* Это сделает правую границу черной*/
} 

Попробуйте Live Learn на Udacity

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

Пример

 .tooltip .tooltiptext::after {
содержание: " ";
положение: абсолютное;
    верх: 50%;
слева: 100%; /* Это поместит стрелку справа от всплывающей подсказки */
верхнее поле: -10px;
    ширина границы: 10px;
стиль границы: сплошной;
цвет границы: прозрачный прозрачный прозрачный черный; /* Это сделает левую границу черной*/
} 

Попробуйте вживую Узнайте на Udacity

Fade In Animation

Fade In Tooltip
Текст всплывающей подсказки

Без дополнительных свойств окно всплывающей подсказки появляется внезапно. Однако из-за свойств стиля перехода и непрозрачности всплывающая подсказка постепенно исчезает .

В этом примере мы создаем плавный эффект постепенного появления :

Пример

 .tooltip .tooltiptext {
непрозрачность: 0; /* Это сделает текст всплывающей подсказки невидимым, когда на него не наведено курсор */
переход: непрозрачность 3s;
}
.tooltip: наведение .tooltiptext {
непрозрачность: 1;
} /* Это заставит его исчезать при наведении */ 

Попробуйте в прямом эфире. Учитесь на Udacity

• Нам нужно установить  непрозрачность: 0 , когда всплывающая подсказка скрыта.
• Свойство transition должно указывать продолжительность анимации.
• Нам нужно добавить opacity: 1 во всплывающую подсказку, когда срабатывает :hover .

Подсказка CSS: полезные советы

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

Мои заметки WebDev: как создать всплывающую подсказку с помощью HTML и CSS

Введение

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

HTML

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

 
<дел>
    Наведите на меня Это всплывающая подсказка

 .подсказка {
    положение: родственник;
    отображение: встроенный блок;
    нижняя граница: 1 пиксель с черными точками;
}
 

 .tooltip .tooltiptext {
    положение: абсолютное;
    внизу: 125%;
    слева: 50%;
    видимость: скрытая;
    z-индекс: 1;
    /* Косметика */
    цвет: #fff;
    цвет фона: #555;
    ширина: 120 пикселей;
    выравнивание текста: по центру;
    отступ: 5px 0;
    поле слева: -60px;
    радиус границы: 6px;
    непрозрачность: 0;
    переход: непрозрачность 1с;
}
 

 .tooltip .tooltiptext::после {
    /* Прочтите код и объяснение */
}
 

 .tooltip .tooltiptext::после {
    положение: абсолютное;
    содержание: "";
    /* Переместите его в центр */
    верх: 100%;
    слева: 50%;
    /* Это создает индикаторы */
    поле слева: -5px;
    ширина границы: 5px;
    стиль границы: сплошной;
    цвет границы: #555 прозрачный;
}
/**
 * Показывать всплывающую подсказку при наведении курсора на
 * Контейнер всплывающей подсказки
 */
. tooltip: наведение .tooltiptext {
    видимость: видимая;
    непрозрачность: 1;
}