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')

События

$('#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

События

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="".

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

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

Методы

$().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')

События

$('#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:

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

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

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

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

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

Разметка

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

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

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

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

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



  
 
  

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

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

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

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

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

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

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

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

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

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

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

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

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

  
  Всплывающая подсказка вверху


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


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


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

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

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

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

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



  
 
  

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

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

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

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

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

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

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

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

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

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

 
    Легенда:

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

    Все бесплатные и профессиональные файлы требуют файлов из каталога '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

    

 
    Легенда:

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

    Все файлы требуют 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
    

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

 Всплывающая подсказка вверху 

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

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

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

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



  
 
  

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

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

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

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

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

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