Всплывающее сообщение html bootstrap

Обновлено: 04.05.2024

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

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

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

Инициализация

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

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

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

Посмотри моё руководство по Grid, ведь никогда не узнаешь, когда оно может понадобиться!

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

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

Положение подсказки

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

Всплывающие подсказки – это фрагменты текста маркера, которые появляются при наведении указателя мыши на гиперссылку. В Bootstrap 5 есть определенные вещи, о которых вы должны позаботиться, прежде чем пытаться добавить всплывающую подсказку. Если вы заметили, что стартовый шаблон содержит новую стороннюю библиотеку JavaScript под названием Popper. Это в основном используется для компонента всплывающей подсказки для позиционирования.

Это руководство охватывает следующие главы:

Основы всплывающих подсказок Bootstrap 5
Инициализация всплывающей подсказки
Использование всплывающей подсказки с тегом привязки
Размещение всплывающих подсказок
Использование всплывающей подсказки с кнопками
Добавление HTML-содержимого во всплывающую подсказку
Параметры настройки

1 Основы всплывающих подсказок Bootstrap

Всплывающие подсказки – это компонент JavaScript, поэтому вы должны включить файлы bootstrap.min.js в свой HTML-шаблон. В качестве альтернативы вы также можете использовать комбинированный файл сценария bootstrap.bundle.min.js.
Также для правильного размещения всплывающих подсказок вы должны включить popper.min.js во весь исходный код.
Всплывающие подсказки не загружаются по умолчанию из-за производительности загрузки страницы. Следовательно, необходимо инициализировать родительский элемент для загрузки на страницу.
Последовательность файлов сценария должна быть popper.min.js, bootstrap.min.js, а затем сценарий инициализации.
Во всплывающих подсказках не используются изображения, и концепция основана на всплывающих подсказках в стиле Facebook, созданных с помощью плагина Tipsy jQuery.
Всплывающая подсказка с нулевой длиной заголовка отображаться не будет.
Bootstrap использует CSS-анимацию и атрибуты данных для управления поведением всплывающих подсказок.

2 Инициализация всплывающих подсказок в Bootstrap

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

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

Ниже приведен код для использования кнопки для инициализации:

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

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

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

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

Результат должен выглядеть в браузере при наведении курсора мыши, как показано ниже:

4 подсказки для позиционирования

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

Используйте data-place = "top" для верхней позиции. Это значение по умолчанию, поэтому вам не нужно явно указывать.
Используйте data-place = "bottom" для нижней позиции.
Используйте data-place = "right" для правильного положения.
Используйте data-location = "left" для левой позиции.

5 всплывающих подсказок на кнопках

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

Результат в браузере должен выглядеть следующим образом:

6 Использование содержимого HTML внутри всплывающей подсказки

По умолчанию всплывающая подсказка поддерживает только текстовое содержимое внутри. Вы можете добавлять HTML- теги с помощью атрибута data-html sds-scrivo-highlighter">

Как видите, содержимое внутри тега title обрабатывается с помощью тегов HTML, если установлен атрибут data-html = “true”. Вот как это будет выглядеть в браузере:

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

Отключите эффект затухания CSS, добавив атрибут data-animation = “false”.
Задержка показа и скрытия с атрибутом задержки данных.
Сдвинуть всплывающую подсказку от элемента, используя смещение данных.

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

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

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

Обзор

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

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

Эффект анимации этого компонента зависит от prefers-reduced-motion медиа-запроса. См. раздел с уменьшенным движением в нашей документации по специальным возможностям .

Получил все это? Отлично, посмотрим, как они работают, на некоторых примерах.

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

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

Примеры

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

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

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

Применение

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

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

Перелив auto и scroll

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

Разметка

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

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

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

Отключенные элементы

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

или , в идеале, с помощью клавиатуры с фокусировкой на клавиатуре tabindex="0" и переопределить pointer-events для отключенного элемента.

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра data- , как в data-animation="" .

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

Добавляет всплывающую подсказку к определенному элементу. Пример: container: 'body' . Этот параметр особенно полезен тем, что позволяет вам размещать всплывающую подсказку в потоке документа рядом с элементом запуска, что предотвратит отрыв всплывающей подсказки от элемента запуска во время изменения размера окна.

Задержка показа и скрытия всплывающей подсказки (мс) - не относится к ручному типу триггера

Если указан номер, задержка применяется как к скрытию, так и к отображению.

Структура объекта: delay:

Разрешить HTML во всплывающей подсказке.

Если true, теги HTML во всплывающей подсказке title будут отображаться во всплывающей подсказке. Если false, innerText свойство будет использоваться для вставки содержимого в DOM.

Используйте текст, если вас беспокоят XSS-атаки.

Как разместить всплывающую подсказку - авто | наверх | внизу | слева | право.
Если auto указано, всплывающая подсказка будет динамически переориентирована.

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

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

Всплывающая подсказка title будет вставлена в .tooltip-inner .

.tooltip-arrow станет стрелкой всплывающей подсказки.

Самый внешний элемент оболочки должен иметь .tooltip класс и role="tooltip" .

Значение заголовка по умолчанию, если title атрибут отсутствует.

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

Как запускается всплывающая подсказка - щелкните | парить | фокус | руководство по эксплуатации. Вы можете передать несколько триггеров; разделите их пробелом.

'manual' указывает на то, что подсказка будет запускаться программно через .tooltip('show') , .tooltip('hide') и .tooltip('toggle') методов; это значение нельзя комбинировать с другими триггерами.

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

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

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

Дополнительные сведения см. В документации по смещению Popper.js .

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

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

Методы

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

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

show (показать)

hide (скрыть)

toggle

dispose

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

enable

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

disable

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

toggleEnabled

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

update

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

getInstance

Статический метод, позволяющий получить экземпляр всплывающей подсказки, связанный с элементом DOM.

События

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

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

В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.

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

Чтобы было более просто выбрать все элементы на странице, для которых необходимо вызвать метод tooltip() , к ним можно добавить атрибут data-toggle="tooltip" .

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

Подсказка слева, сверху, снизу и справа:

Примеры вызова метода tooltip() :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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