Tooltip bootstrap 4: Tooltips · Bootstrap

Содержание

Подсказки. Компоненты · Bootstrap. Версия v4.0.0

Документация и примеры добавления настраиваемых всплывающих подсказок 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()
})

Примеры


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




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




<button type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

И с добавлением обычного HTML:


<button type="button" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

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


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


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


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

Разметка


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


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

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

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


<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div role="tooltip">
  <div></div>
  <div>
    Some tooltip text!
  </div>
</div>

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


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




Параметры


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















Название Тип Умолчание Описание
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 0 Отступ подсказки относительно ее «цели». Для большей информации иди в документацию отступов Popper. js.
fallbackPlacement string | array ‘flip’ Позволяет задать, какую позицию Popper.js будет использовать при «откате». Для информации — сюда.
boundary string | element ‘scrollParent’ Граница ограничения overflow подсказки. Принимает значения 'viewport', 'window', 'scrollParent' или отсылку к элементу HTML (только в JavaScript). Для информации – документация по preventOverflow docs.
Атрибуты для отдельных всплывающих подсказок

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


Методы


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

Все методы 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 () {
  // do something…
})

Подсказки · Bootstrap на русском

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

Содержание

Обзор

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

  • Подсказки полагаться на 3-й партии библиотеки Tether для позиционирования. Необходимо включить tether.min.js до bootstrap.js для того, для подсказок, чтобы работать!
  • Подсказки отказаться, по соображениям производительности, так что вы должны инициализировать их самостоятельно.
  • Подсказки с нулевой длины названия не отображаются.
  • Укажите container: 'body' чтобы избежать проблем с рендерингом в более сложные компоненты (типа наших групп ввода, групп кнопки и т. д.).
  • Вызывая подсказки на скрытые элементы не будут работать.
  • Подсказки для .disabled или disabled элементы должны быть вызваны на элемент оболочки.
  • При срабатывании из гиперссылок, которые охватывают несколько строк, подсказки будут центрироваться. Используйте white-space: nowrap; на <a>, чтобы избежать этого поведения.

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

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

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

Примеры

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

Статические демо

Доступны четыре варианта: сверху, справа, снизу и выровнен по левому краю.

Интерактивная демо-версия

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

<button type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

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

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

Вызвать подсказку через JavaScript:

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

Разметки

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

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

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

<!-- HTML писать -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Сгенерированной разметке плагин -->
<div role="tooltip">
  <div></div>
  <div>
    Some tooltip text!
  </div>
</div>

Варианты

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

Имя Тип По умолчанию Описание
animation boolean true Нанесите CSS плавного перехода к подсказке
container string | false false

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

delay number | object 0

Задержка отображения и скрытия подсказки (мс) — не применяется к ручной запуск Тип

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

Структура объекта: delay: { "show": 500, "hide": 100 }

html boolean false Вставить HTML в подсказке. Если задано значение false, в jQuery text метод будет использоваться, чтобы вставить содержание в DOM. Используйте текст, если вы беспокоитесь о xss-атак.
placement string | function ‘top’

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

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

selector string false Если имеется селектор, объектов пирог будет передана указанным целям. На практике это используется для включения динамического содержимого HTML для эклеров добавил. Смотрите это и информативный пример.
template string '<div role="tooltip"><div></div><div></div></div>'

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

Подсказки title вводится в поток .tooltip-inner.

.tooltip-arrow станет стрелка подсказки.

Элемент внешней оболочки должен иметь .tooltip класс.

title string | element | function »

По умолчанию название значение, если атрибут title Нет.

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

trigger string ‘hover focus’ Как подсказка срабатывает клик | наведение | фокус | руководство. Вы можете пройти несколько триггеров; разделяйте их пробелом. «вручную» не может сочетаться с любой другой триггер.
constraints Array [] Множество препятствий — прошел на Tether. Дополнительные сведения см. в разделе Tether’ы ограничение документы.
offset string ‘0 0’ Смещение окна относительно своей цели. Дополнительные сведения см. в разделе Tether’ы смещение документы.
Атрибуты данных для отдельных подсказки

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

Методы

$().tooltip(options)

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

.tooltip('show')

Показывает всплывающая подсказка элемента. Возвращается к абоненту до подсказки было показано (т. е. shown.bs.tooltip события). Это считается “ручного” срабатывания подсказке. Подсказки с нулевой длины названия не отображаются.

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

.tooltip('hide')

Скрытие всплывающей подсказки элемента. Возвращает вызывающему перед подсказкой на самом деле был скрытый (т. е. hidden.bs.tooltip события). Это считается “ручного” срабатывания подсказке.

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

.tooltip('toggle')

Переключает подсказка элемента. Возвращает вызывающей до подсказки было показано или скрыто (т. е. shown.bs.tooltip или hidden.bs.tooltip события). Это считается “ручного” срабатывания подсказке.

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

.tooltip('dispose')

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

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

События

Тип События Описание
show.bs.tooltip Это событие возникает сразу же, когда show вызывается способ экземпляра.
shown.bs.tooltip Это событие запускается, когда подсказка была сделана видимой для пользователя (будет ждать CSS переходы для завершения).
hide.bs.tooltip Это событие сразу же уволили, когда hide метод экземпляра называется.
hidden.bs.tooltip Это событие запускается, когда подсказка закончит быть скрыта от пользователя (будет ждать CSS переходы для завершения).
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // сделать что-то. ..
})

Bootstrap Tooltip | Bootstrap 4


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


 

Для примера создания tooltip создадим кнопки.

Атрибут data-placement задает позицию подсказки, title – текст подсказки.

Также можно подсказку формировать с html форматированием. Для этого последней кнопке добавим data-html со значением true, а в атрибуте title отформатируем текст.


 

<button type="button" data-toggle="tooltip" data-placement="top"
        title="Tooltip on top">
    Tooltip on top
</button>
<button type="button" data-toggle="tooltip" data-placement="right"
        title="Tooltip on right">
    Tooltip on right
</button>
<button type="button" data-toggle="tooltip" data-placement="bottom"
        title="Tooltip on bottom">
    Tooltip on bottom
</button>
<button type="button" data-toggle="tooltip" data-placement="left" data-html="true"
        title="<em>Tooltip</em> <u>on</u> <b>left</b>">
    Tooltip on left
</button>

 

Всплывающие окна будут иметь атрибуты data-container, в котором делаем привязку к элементу, data-toggle со значением popover, title, data-content, в котором будет содержимое.



 

<button type="button" data-container="body" data-toggle="popover" data-placement="top"
        title="Popover title"
        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on top
</button>

<button type="button" data-container="body" data-toggle="popover" data-placement="right"
        title="Popover title"
        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on right
</button>

<button type="button" data-container="body" data-toggle="popover" data-placement="bottom"
        title="Popover title"
        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on bottom
</button>

<button type="button" data-container="body" data-toggle="popover" data-placement="left"
        title="Popover title"
        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus. ">
    Popover on left
</button>


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

Обзор

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

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

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

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

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

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

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

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

Примеры

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

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

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

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

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

С SVG:

Sass

Переменные

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   . 9;
$tooltip-padding-y:                 $spacer / 4;
$tooltip-padding-x:                 $spacer / 2;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

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

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

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

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
Переполнение

auto и scroll

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

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

Разметка

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

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

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

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

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

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

Элементы с атрибутом disabled не являются интерактивными, то есть пользователи не могут сфокусироваться, навести на них курсор или щелкнуть их, чтобы вызвать всплывающую подсказку (или всплывающее окно). В качестве обходного пути Вы захотите вызвать всплывающую подсказку из оболочки <div> или <span>, в идеале сделанной с фокусировкой на клавиатуре, используя tabindex="0".

Параметры

Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-bs-, как в data-bs-animation="". Обязательно измените тип case имени параметра с camelCase на kebab-case при передаче параметров через атрибуты данных. Например, вместо использования data-bs-customClass="beautifier" используйте data-bs-custom-class="beautifier".

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

Наименование Тип По умолчанию Описание
animation boolean true Применить переход CSS fade к всплывающей подсказке
container string | element | false false

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

delay number | object 0

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

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

Структура объекта: delay: { "show": 500, "hide": 100 }

html boolean false

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

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

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

placement string | function 'top'

Как разместить всплывающую подсказку — auto | top | bottom | left | right.
Если задано auto всплывающая подсказка будет динамически переориентирована.

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

selector string | false false Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это также используется для применения всплывающих подсказок к динамически добавляемым элементам DOM (поддержка jQuery. on). Смотрите это и информативный пример.
template string '<div role="tooltip"><div></div><div></div></div>'

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

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

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

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

title string | element | function ''

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

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

trigger string 'hover focus'

Как запускается всплывающая подсказка — click | hover | focus | manual. Вы можете передать несколько триггеров; разделить их пробелом.

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

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

fallbackPlacements array ['top', 'right', 'bottom', 'left'] Определите резервные места размещения, предоставив список мест размещения в массиве (в порядке предпочтения). Для получения дополнительной информации смотрите документацию о поведении Popper.
boundary string | element 'clippingParents' Граница ограничения переполнения всплывающей подсказки (применяется только к модификатору Popper preventOverflow). По умолчанию это 'clippingParents' и может принимать ссылку HTMLElement (только через JavaScript). Дополнительную информацию смотрите в detectOverflow в документации Popper.
customClass string | function ''

Добавляйте классы во всплывающую подсказку, когда она отображается. Обратите внимание, что эти классы будут добавлены в дополнение к любым классам, указанным в шаблоне. Чтобы добавить несколько классов, разделите их пробелами: 'class-1 class-2'.

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

sanitize boolean true Включите или отключите дезинфекцию. Если активированы параметры 'template' и 'title' , будут очищены. Смотрите раздел очистки в нашей документации по JavaScript.
allowList object Значение по умолчанию Объект, содержащий разрешенные атрибуты и теги
sanitizeFn null | function null Здесь Вы можете предоставить свою собственную функцию дезинфекции. Это может быть полезно, если Вы предпочитаете использовать специальную библиотеку для выполнения очистки.
offset array | string | function [0, 0]

Смещение всплывающей подсказки относительно цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: data-bs-offset="10,20"

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

Дополнительную информацию смотрите в offset документации Popper.

offset array | string | function [0, 0]

Смещение всплывающей подсказки относительно цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: data-bs-offset="10,20"

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

Дополнительную информацию смотрите в offset документации Popper.

popperConfig null | object | function null

Чтобы изменить конфигурацию Popper по умолчанию для Bootstrap, смотрите конфигурацию Popper.

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

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

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

Использование функции с

popperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Методы

show

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

hide

Скрывает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически скрыта (т.е. до того, как произойдет событие hidden.bs.tooltip). Это считается “ручным” запуском всплывающей подсказки.

toggle

Переключает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически показана или скрыта (то есть до того, как произойдет событие shown.bs.tooltip или hidden.bs.tooltip). Это считается “ручным” запуском всплывающей подсказки.

dispose

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

enable

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

disable

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

toggleEnabled

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

update

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

getInstance

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

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

События

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

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // делайте что-нибудь...
})

tooltip.hide()

Компоненты






Вдохновленные замечательным плагином jQuery.tipsy, написанным Jason Frame, подсказки являются обновленной версией, которая не использует изображение, использует CSS3 для анимации, и атрибуты данных для хранения локальных заголовков.


Содержание


Обзор


Что нужно знать при использовании плагина подсказок:


  • Подсказки полагаются на третью библиотеку Tether для позиционирования. Вы должны включить tether.min.js перед bootstrap.js для того, чтобы подсказки работали!
  • Подсказки выбираются по соображениям производительности, поэтому вы должны их инициализировать самостоятельно.
  • Подсказки с названиями нулевой длины никогда не отображаются.
  • Укажите container: 'body' чтобы избежать проблем с отображением более сложных компонентов (например, групп ввода, групп кнопок и т. д.).
  • Запуск подсказок для скрытых элементов не будет работать.
  • Подсказки для .disabled или disabled элементов нуждаются в обертывании.
  • При запуске из гиперссылок, которые охватывают несколько строк, подсказки будут центрированы. Используйте white-space: nowrap; на ваших <a>, чтобы избежать этого.

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




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


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

Примеры


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




Статическая демонстрация


Доступны четыре варианта: верхнее, правое, нижнее и левыое выравнивание




Интерактивная демонстрация


Чтобы увидеть подсказки, наведите курсор на кнопки ниже.




<button type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

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


<button type="button" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

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


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


Вызов подсказок через JavaScript:


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

Разметка


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


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

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


<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div role="tooltip">
  <div></div>
  <div>
    Some tooltip text!
  </div>
</div>

Параметры


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














Название Тип По умолчанию Описание
animation логический true применяет CSS для плавного перехода к подсказке
container строковый | element | false false

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

delay числовой | object 0

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

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

Структура объекта: delay: { "show": 500, "hide": 100 }

html логический false

Вставляет HTML в подсказку.

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

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

placement строковый | функция ‘top’

Как позиционировать подсказку — сверху | снизу | слева | справа.

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

selector строковый false Если предоставлен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это используется для того, чтобы динамический HTML-контент добавлял подсказки. Смотрите это и информативный пример.
template строковый '<div role="tooltip"><div></div><div></div></div>'

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

title подсказки будет добавлен в .tooltip-inner.

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

Внешний элемент-обтекатель должен иметь класс .tooltip.

title строковый | элемент | функция »

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

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

trigger строковый ‘hover focus’ Как запускается всплывающая подсказка — нажатие | наведение | фокус | manual. Вы можете передавать несколько триггеров; разделите их пробелом. `Manual` не может комбинироваться с любым другим триггером.
constraints массив [] Массив ограничений — передан Tether. Для получения дополнительной информации обратитесь к документам ограничений Tether.
offset строковый ‘0 0’ Смещение всплывающей подсказки относительно ее цели. Для получения дополнительной информации обратитесь к offset docs Tether.
Атрибуты данных для индивидуальных подсказок

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


Методы


$().tooltip(options)


Закрепите обработчик подсказки по набору элементов.


.tooltip('show')


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


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

.tooltip('hide')


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


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

.tooltip('toggle')


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


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

.tooltip('dispose')


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


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

События







Тип События Описание
show.bs.tooltip Это событие срабатывает во время вызова метода show.
shown.bs.tooltip Это событие срабатывает, когда подсказка будет отображаться для пользователя (при этом ожидается завершение CSS переходов).
hide.bs.tooltip Это событие срабатывает во время вызова метода hide.
hidden.bs.tooltip Это событие срабатывает, когда сокрытие элемента для пользователя завершится (при этом ожидается завершение CSS переходов).
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

всплывающих подсказок · Bootstrap

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

Обзор

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

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

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

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

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

Примеры

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

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

  


  

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

    

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

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

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

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

Разметка

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

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

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

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

  
 Наведите указатель мыши на меня 


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

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

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

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

Опции

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

Номер

Номер

Имя Тип По умолчанию Описание
анимация логический правда Применить переход затухания CSS к всплывающей подсказке
контейнер строка | элемент | ложь ложный

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

задержка | объект 0

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

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

Структура объекта: задержка: {"show": 500, "hide": 100}

HTML логический ложный

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

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

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

размещение строка | функция 'верх'

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

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

селектор строка | ложь ложный Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям. На практике это используется для включения всплывающих окон динамического HTML-содержимого.См. Этот и информативный пример.
шаблон строка '

'

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

Заголовок всплывающей подсказки будет вставлен в .tooltip-inner .

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

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

название строка | элемент | функция ''

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

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

триггер строка 'парящий фокус'

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

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

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

смещение | строка 0 Смещение всплывающей подсказки относительно цели. Для получения дополнительной информации обратитесь к документации по смещению Popper.js.
резервное размещение строка | массив "переворот" Разрешить указать, какую позицию Поппер будет использовать при откате. Для получения дополнительной информации см.
Поведение Popper.js docs
граница строка | элемент 'scrollParent' Граница ограничения переполнения всплывающей подсказки.Принимает значения 'viewport' , 'window' , 'scrollParent' или ссылку HTMLElement (только JavaScript). Для получения дополнительной информации обратитесь к документации Popper.js preventOverflow.
Атрибуты данных для отдельных всплывающих подсказок

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

Методы

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

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

См. Нашу документацию по JavaScript для получения дополнительной информации.

$ (). Подсказка (опции)

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

.tooltip ('показать')

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

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

.tooltip ('hide')

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

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

.tooltip ('toggle')

Переключает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически показана или скрыта (то есть до того, как произойдет событие shown.bs.tooltip или 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')  

События

Показан

Тип события Описание
показать.bs.tooltip Это событие запускается немедленно при вызове метода экземпляра show .
.bs.tooltip Это событие вызывается, когда всплывающая подсказка становится видимой для пользователя (ожидает завершения переходов CSS).
hide.bs.tooltip Это событие запускается сразу после вызова метода экземпляра hide .
hidden.bs.всплывающая подсказка Это событие вызывается, когда всплывающая подсказка перестает быть скрытой от пользователя (будет ожидать завершения переходов CSS).
вставлен. Инструмент. Наконечник Это событие запускается после события show.bs.tooltip , когда шаблон всплывающей подсказки был добавлен в DOM.
  $ ('# myTooltip'). On ('hidden.bs.tooltip', function () {
  // сделай что-нибудь…
})  

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

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

Обзор

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

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

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

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

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

Примеры

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

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

  


  

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

    

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

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

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

  $ ('# пример'). Подсказка (параметры)  
Перелив

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

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

  $ ('# пример').всплывающая подсказка ({граница: 'окно'})  

Разметка

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

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

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

  
 Наведите указатель мыши на меня 


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

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

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

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

Опции

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

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

Номер

Номер

Имя Тип По умолчанию Описание
анимация логический правда Применить переход затухания CSS к всплывающей подсказке
контейнер строка | элемент | ложь ложный

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

задержка | объект 0

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

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

Структура объекта: задержка: {"show": 500, "hide": 100}

HTML логический ложный

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

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

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

размещение строка | функция 'верх'

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

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

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

'

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

Заголовок всплывающей подсказки будет вставлен в .tooltip-inner .

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

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

название строка | элемент | функция ''

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

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

триггер строка 'парящий фокус'

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

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

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

смещение | строка | функция 0

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

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

Для получения дополнительной информации см. Документацию по смещению Popper.js.

резервное размещение строка | массив "переворот" Разрешить указать, какую позицию Поппер будет использовать при откате. Для получения дополнительной информации см.
Поведение Popper.js docs
граница строка | элемент 'scrollParent' Граница ограничения переполнения всплывающей подсказки.Принимает значения 'viewport' , 'window' , 'scrollParent' или ссылку HTMLElement (только JavaScript). Для получения дополнительной информации обратитесь к документации Popper.js preventOverflow.
продезинфицировать логический правда Включение или отключение очистки. Если активирован «шаблон» и «заголовок» , параметры будут очищены.
белый список объект Значение по умолчанию Объект, содержащий разрешенные атрибуты и теги
sanitizeFn null | функция null Здесь вы можете указать свою собственную функцию дезинфекции.Это может быть полезно, если вы предпочитаете использовать специальную библиотеку для выполнения очистки.
popperConfig null | объект null Чтобы изменить конфигурацию Popper.js по умолчанию для Bootstrap, см. Конфигурацию Popper.js
Атрибуты данных для отдельных всплывающих подсказок

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

Методы

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

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

См. Нашу документацию по JavaScript для получения дополнительной информации.

$ (). Подсказка (опции)

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

.tooltip ('показать')

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

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

.tooltip ('hide')

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

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

.tooltip ('toggle')

Переключает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически показана или скрыта (то есть до того, как произойдет событие shown.bs.tooltip или 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')  

.всплывающая подсказка ('обновление')

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

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

События

Показан

Тип события Описание
показать.bs.tooltip Это событие запускается немедленно при вызове метода экземпляра show .
.bs.tooltip Это событие вызывается, когда всплывающая подсказка становится видимой для пользователя (ожидает завершения переходов CSS).
hide.bs.tooltip Это событие запускается сразу после вызова метода экземпляра hide .
hidden.bs.tooltip Это событие вызывается, когда всплывающая подсказка перестает быть скрытой от пользователя (будет ожидать завершения переходов CSS).
вставлен. Инструмент. Наконечник Это событие запускается после события show.bs.tooltip , когда шаблон всплывающей подсказки был добавлен в DOM.
  $ ('# myTooltip'). On ('hidden.bs.tooltip', function () {
  // сделай что-нибудь...
})  

Bootstrap 4 Tooltip - примеры, руководство и расширенное использование

Компиляция и настройка

Чтобы еще больше уменьшить вес пакета MDBootstrap, вы можете скомпилировать свой собственный пакет, содержащий только
эти компоненты и
функции, которые вам нужны.

Если вам нужна дополнительная помощь в компиляции вашего пользовательского пакета, воспользуйтесь нашим руководством по компиляции и настройке.

Руководство по компиляции и настройке

Карта зависимостей файлов SCSS в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все бесплатные и профессиональные файлы требуют файлов из каталога 'core'

    'none' означает 'этот компонент не требует ничего, кроме файлов ядра'

    Файл, заключенный в ``, означает, что этот файл делает базовый компонент красивее, но это не обязательно для правильной работы.

    Для всех компонентов PRO требуется файл pro / _variables.scss.

    scss /
    |
    | - ядро ​​/
    | |
    | | - бутстрап /
    | | | - _функции.scss
    | | | - _variables.scss
    | |
    | | - _colors.scss
    | | - _global.scss
    | | - _helpers.scss
    | | - _masks.scss
    | | - _mixins.scss
    | | - _typography.scss
    | | - _variables.scss
    | | - _waves.scss
    |
    | - бесплатно /
    | | - _animations-basic.scss -> нет
    | | - _animations-extended.scss -> _animations-basic.scss
    | | - _buttons.scss -> нет
    | | - _cards.scss -> нет
    | | - _dropdowns.scss -> нет
    | | - _вход-группа.scss -> _forms.scss, _buttons.scss, _dropdowns.scss
    | | - _navbars.scss -> нет
    | | - _pagination.scss -> нет
    | | - _badges.scss -> нет
    | | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss)
    | | - _carousels.scss ->
    | | - _forms.scss -> нет
    | | - _msc.scss -> нет
    | | - _footers.scss нет (PRO :)
    | | - _list-group.scss -> нет
    | | - _tables.scss -> нет (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss)
    | | - _depreciated.scss
    |
    | - pro /
    | |
    | | - сборщик /
    | | | - _default.scss -> нет
    | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
    | | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss
    | |
    | | - разделы /
    | | | - _templates.scss -> _sidenav.scss
    | | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss,
    | | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, бесплатно / _cards.scss, pro / _cards.scss
    | | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _magazine.scss -> _badges.scss
    | | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | |
    | | - _variables.scss
    | | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
    | | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | - _tabs.scss -> _cards.scss
    | | - _cards.scss -> бесплатно / _cards.scss
    | | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss
    | | - _navbars.scss -> бесплатно / _navbars.scss (PRO :)
    | | - _scrollspy.scss -> нет
    | | - _lightbox.scss -> нет
    | | - _chips.scss -> нет
    | | - _msc.scss -> нет
    | | - _forms.scss -> нет
    | | - _radio.scss -> нет
    | | - _checkbox.scss -> нет
    | | - _material-select.scss -> нет
    | | - _switch.scss -> нет
    | | - _file-input.scss -> бесплатно / _forms.scss, бесплатно / _buttons.scss
    | | - _range.scss -> нет
    | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss
    | | - _autocomplete.scss -> бесплатно / _forms.scss
    | | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss
    | | - _parallax.scss -> нет
    | | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss
    | | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
    | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss
    | | - _степеры.scss -> бесплатно / _buttons.scss
    | | - _blog.scss -> нет
    | | - _toasts.scss -> бесплатно / _buttons.scss
    | | - _animations.scss -> нет
    | | - _charts.scss -> нет
    | | - _progress.scss -> нет
    | | - _scrollbar.scss -> нет
    | | - _skins.scss -> нет
    | | - _depreciated.scss
    |
    `- _custom-skin.scss
    `- _custom-styles.scss
    `- _custom-variables.scss
    `- mdb.scss

    

Карта зависимостей модулей JavaScript в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все файлы требуют jQuery и начальной загрузки.js

    js /
    ├── dist /
    │ ├── buttons.js
    │ ├── cards.js
    │ ├── character-counter.js
    │ ├── chip.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── dropdown.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> поставщик / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src /
    │ ├── buttons.js
    │ ├── cards.js
    │ ├── character-counter.js
    │ ├── chip.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── dropdown.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── предварительная нагрузка.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    └── продавец /
        ├── аддоны /
        │ ├── datatables.js
        │ └── datatables.min.js
        ├── chart.js
        ├── extended-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js -> vendor / jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js -> vendor / hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js -> vendor / picker.js
        ├── picker.js
        ├── picker-time.js -> vendor / picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
    

Всплывающие подсказки Bootstrap - примеры и руководство

Номер

Номер

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

Добавляет всплывающую подсказку к определенному элементу.Пример:
контейнер: «тело» . Эта опция особенно полезна тем, что позволяет
вы разместите всплывающую подсказку в потоке документа рядом с элементом запуска
- что предотвратит отрыв всплывающей подсказки от триггерного элемента
во время изменения размера окна.

customClass строка | функция ''

Добавляйте классы в всплывающую подсказку, когда она отображается.Обратите внимание, что эти классы будут добавлены в
дополнение к любым классам, указанным в шаблоне. Чтобы добавить несколько классов, разделите
их с пробелами: 'класс-1 класс-2' .

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

задержка | объект 0

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

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

Структура объекта: задержка: {"show": 500, "hide": 100}

HTML логический ложный

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

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

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

размещение строка | функция 'верх'

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

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

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

'

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

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

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

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

титул строка | элемент | функция ''

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

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

триггер строка 'парящий фокус'

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

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

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

смещение | строка | функция 0

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

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

Для получения дополнительной информации обратитесь к Поппера
компенсировать
документы

резервное размещение строка | массив "переворот" Позволяет указать, какую позицию Поппер будет использовать при откате. Для получения дополнительной информации см.
Поппера
поведение
документы
граница строка | элемент 'вырезка Родители' Граница ограничения переполнения всплывающей подсказки (применяется только для модификатора preventOverflow объекта Popper).Принимает значения
'viewport' , 'window' , 'scrollParent' или
Ссылка на HTMLElement (только через JavaScript). Для получения дополнительной информации обратитесь к Поппера
detectOverflow docs.
продезинфицировать логический правда Включите или отключите дезинфекцию. Если активировано
«шаблон» и «заголовок» параметры будут очищены.
белый список объект Значение по умолчанию Объект, содержащий разрешенные атрибуты и теги
sanitizeFn null | функция пустое значение Здесь вы можете предоставить свою собственную функцию дезинфекции. Это может быть полезно, если вы предпочитаете использовать
специальная библиотека для выполнения дезинфекции.
popperConfig null | объект пустое значение Чтобы изменить конфигурацию Popper по умолчанию в Bootstrap, см.
Поппера
конфигурация

Bootstrap 4 Tooltips

Добавьте стилизованную всплывающую подсказку с помощью функции всплывающей подсказки Bootstrap.

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

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

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

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

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




Простые и настраиваемые подсказки для начальной загрузки 4: 6 примеров

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

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

Пример HTML-подсказки для всех направлений в демонстрационной форме

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

Пример основной подсказки

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

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

Посмотреть онлайн-демонстрацию и код

В разметке:

Скрипт:

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

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

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

Кроме того, демонстрация использует атрибут data-toggle = ”tooltip” в теге кнопки, который также упоминается в коде jQuery для запуска всех всплывающих подсказок при одном вызове.Взгляните на демонстрацию с четырьмя кнопками во всех направлениях:

Посмотреть онлайн-демонстрацию и код

В разметке:

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

18

19

20

21

22

23

24

25

26

27

28

29

30

0003

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

9000 2

Скрипт для инициализации всех подсказок:

Пример использования HTML-тегов в подсказке

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

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

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

Посмотреть онлайн-демонстрацию и код

HTML-код:

Подсказка с демонстрацией HTML

Настройка внешнего вида всплывающей подсказки

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

Точнее, класс .tooltip-inner определяет внутренний макет всплывающей подсказки, который я переопределил в приведенном ниже примере:

Посмотреть онлайн-демонстрацию и код

CSS, используемый в разделе

Смотрите полный код и вывод на демонстрационной странице.

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

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

Посмотреть онлайн-демонстрацию и код

В разметке:

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

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

18

19

20

21

22

23

.tooltip-inner {

padding: 6px 7px;

цвет: # 912F00;

выравнивание текста: по центру;

font-weight: 900;

фон: -webkit-gradient (линейный, слева вверху, слева 25, от (# FFEEE6), остановка цвета (4%, # FFEEE6) до (# FFEEE6));

фон: -moz-linear-gradient (вверху, # F4F4F4, # B4C8D6 1px, # F4F4F4 25px);

граница: сплошная 1px # 912F00;

-webkit-border-radius: 9px;

-moz-border-radius: 9px;

радиус границы: 4 пикселя;

}

Использование всплывающей подсказки в примере формы

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

Посмотрите этот пример в Интернете и наведите указатель мыши на любое текстовое поле, особенно на пароль, чтобы увидеть, как появляется всплывающая подсказка HTML:

Посмотреть онлайн-демонстрацию и код

Разметка формы с подсказками:

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

18

19

20

21

22

23

24

25

26

27

28

29

30

000

000 34

35

36

37

38

39

40

41

42

43

44

45

"text" data-toggle = "tooltip" data-Placement = "left" aria-descriptionby = "nameHelp" title = "Введите свое полное имя">

< button type = "submit"> Создать учетную запись

Как видите, заголовок используется в тегах управления формой.В поле пароля также используется data-html = ”true” , а в атрибуте title теги и используются для создания маркированной информации.

Для инициализации всплывающих подсказок используется тот же сценарий, что и в приведенных выше примерах, с data-toggle = "tooltip".

Tooltips - Bootstrap - University of Houston

Вдохновленный отличным плагином jQuery.tipsy, написанным Джейсоном Фреймом; Всплывающие подсказки - это обновленная версия, которая не полагается на изображения, использует CSS3 для анимации и атрибуты данных для локального хранения заголовков.

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

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

Статическая подсказка

Доступны четыре варианта: по верхнему, правому, нижнему и левому краям.

Четыре направления

  





  

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

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

  $ ('# пример'). Подсказка (параметры)  

Разметка

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

  
 Наведите указатель мыши на меня 


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

Опции

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

Номер

Название Тип По умолчанию Описание
анимация логический правда Применить переход затухания CSS к всплывающей подсказке
контейнер строка | ложь ложный

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

задержка | объект 0

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

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

Структура объекта: задержка: {"show": 500, "hide": 100}

HTML логический ложный Вставьте HTML во всплывающую подсказку.Если false, метод jQuery text будет использоваться для вставки содержимого в DOM. Используйте текст, если вас беспокоят XSS-атаки.
размещение строка | функция 'верх'

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

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

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

'

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

Заголовок всплывающей подсказки будет вставлен в .tooltip-inner .

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

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

название строка | функция ''

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

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

триггер строка 'парящий фокус' Как запускается всплывающая подсказка - щелкните | зависать | фокус | руководство по эксплуатации.Вы можете передать несколько триггеров; разделите их пробелом. ручной нельзя комбинировать с каким-либо другим триггером.
окно просмотра строка | объект | функция {селектор: 'тело', отступ: 0}

Сохраняет всплывающую подсказку в пределах этого элемента. Пример: viewport: '#viewport' или {"selector": "#viewport", "padding": 0}

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

Методы

$ (). Подсказка (опции)

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

.tooltip ('показать')

Показывает всплывающую подсказку элемента. Возврат к вызывающему объекту до того, как всплывающая подсказка будет отображена. (т.е. до того, как произойдет событие shown.bs.tooltip ). Это считается "ручным" запуском всплывающей подсказки.Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.

  $ ('# элемент'). Подсказка ('показать')  

.tooltip ('скрыть')

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

  $ ('# элемент'). Подсказка ('скрыть')  

.tooltip ('toggle')

Переключает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически показана или скрыта (то есть до того, как произойдет событие shown.bs.tooltip или hidden.bs.tooltip ). Это считается "ручным" запуском всплывающей подсказки.

  $ ('# элемент'). Подсказка ('переключение')  

.tooltip ('уничтожить')

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

  $ ('# элемент'). Подсказка ('уничтожить')  

События

Показан

Тип события Описание
show.bs.tooltip Это событие запускается немедленно при вызове метода экземпляра show .
.bs.tooltip Это событие вызывается, когда всплывающая подсказка становится видимой для пользователя (ожидает завершения переходов CSS).
скрыть.bs.tooltip Это событие запускается сразу после вызова метода экземпляра hide .
hidden.bs.tooltip Это событие вызывается, когда всплывающая подсказка перестает быть скрытой от пользователя (будет ожидать завершения переходов CSS).
вставлен. Инструмент. Наконечник Это событие запускается после события show.bs.tooltip , когда шаблон всплывающей подсказки был добавлен в DOM.
  $ ('# myTooltip').on ('hidden.bs.tooltip', function () {
  // сделай что-нибудь…
})  

.

Добавить комментарий

Ваш адрес email не будет опубликован.