Bootstrap - Подключаемый модуль всплывающей подсказки

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

Если вы хотите включить этот плагин индивидуально, вам понадобится tooltip.js. В противном случае, как упоминалось в главе Обзор подключаемых модулей Bootstrap , вы можете включить bootstrap.js или минимизированный bootstrap.min.js .

Применение

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

Via data attributes - Чтобы добавить всплывающую подсказку, добавьте data-toggle = "tooltip"к тегу привязки. Заголовок привязки будет текстом всплывающей подсказки. По умолчанию плагин устанавливает всплывающую подсказку вверху.

<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>

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

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

Плагин Tooltip - это НЕ только плагины css, такие как dropdown или другие плагины, описанные в предыдущих главах. Чтобы использовать этот плагин, вы ДОЛЖНЫ активировать его с помощью jquery (читайте javascript). Чтобы включить все всплывающие подсказки на вашей странице, просто используйте этот скрипт -
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });

пример

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

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   title = "Tooltip on left"> Default Tooltip</a>.

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "top" 
   title = "Tooltip on top">Tooltip on Top</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
   title = "Tooltip on bottom">Tooltip on Bottom</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "right" 
   title = "Tooltip on right">Tooltip on Right</a>
	
<br>

<h4>Tooltip examples for buttons</h4>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
   Default Tooltip
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">
	
   Tooltip on left
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "top" title = "Tooltip on top">
   
   Tooltip on top
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "bottom" title = "Tooltip on bottom">
   
   Tooltip on bottom
</button>

<button type = " button" class = " btn btn-default" data-toggle = "tooltip" 
   data-placement = "right" title = "Tooltip on right">
   
   Tooltip on right
</button>

<script>
   $(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>

Параметры

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

Название опции	Тип / значение по умолчанию	Имя атрибута данных	Описание
анимация	логическое По умолчанию: true	данные-анимация	Применяет к всплывающей подсказке плавный переход CSS.
html	логическое По умолчанию: false	data-html	Вставляет HTML во всплывающую подсказку. Если false, текстовый метод jQuery будет использоваться для вставки содержимого в dom. Используйте текст, если вас беспокоят XSS-атаки.
размещение	строка \| функция По умолчанию: вверх	размещение данных	Определяет, как расположить всплывающую подсказку (то есть вверху \| внизу \| слева \| справа \| автоматически). Если указано auto , всплывающая подсказка будет динамически переориентирована. Например, если для размещения выбрано значение «автоматически влево», всплывающая подсказка будет отображаться слева, когда это возможно, в противном случае - справа.
селектор	строка По умолчанию: false	селектор данных	Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям.
заглавие	строка \| функция По умолчанию: "	заголовок данных	Параметр заголовка является значением заголовка по умолчанию, если атрибут заголовка отсутствует.
триггер	строка По умолчанию: 'hover focus'	триггер данных	Определяет, как запускается всплывающая подсказка: click\| hover \| focus \| manual. Вы можете передать несколько триггеров; разделите их пробелом.
содержание	строка \| функция По умолчанию: ''	информационное наполнение	Значение содержимого по умолчанию, если атрибут содержимого-данных отсутствует
задержка	номер \| объект По умолчанию: 0	задержка данных	Задержки показа и скрытия всплывающей подсказки в мс - не относится к ручному типу триггера. Если указан номер, задержка применяется как к скрытию, так и к отображению. Структура объекта - `delay: { show: 500, hide: 100 }`
контейнер	строка \| false По умолчанию: false	контейнер данных	Добавляет всплывающую подсказку к определенному элементу. Пример: контейнер: 'тело'

Методы

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

Метод	Описание	пример
Options - .tooltip (параметры)	Присоединяет обработчик всплывающей подсказки к коллекции элементов.	`$().tooltip(options)`
Toggle - .tooltip ('переключатель')	Переключает всплывающую подсказку элемента.	`$('#element').tooltip('toggle')`
Show - .tooltip ('показать')	Показывает всплывающую подсказку элемента.	`$('#element').tooltip('show')`
Hide - .tooltip ('скрыть')	Скрывает всплывающую подсказку элемента.	`$('#element').tooltip('hide')`
Destroy - .tooltip ('уничтожить')	Скрывает и уничтожает всплывающую подсказку элемента.	`$('#element').tooltip('destroy')`

пример

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

<div style = "padding: 100px 100px 10px;">
   This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
      title = "show">Tooltip on method show</a>.

   This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip" 
      data-placement = "left" title = "hide">Tooltip on method hide</a>.

   This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip" 
      data-placement = "top" title = "destroy">Tooltip on method destroy</a>.

   This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip" 
      data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
   
   <br><br><br><br><br><br>
   
   <p class = "tooltip-options" >
      This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
         </h2>">Tooltip on method options</a>.
   </p>

   <script>
      $(function () { $('.tooltip-show').tooltip('show');});
      $(function () { $('.tooltip-hide').tooltip('hide');});
      $(function () { $('.tooltip-destroy').tooltip('destroy');});
      $(function () { $('.tooltip-toggle').tooltip('toggle');});
      $(function () { $(".tooltip-options a").tooltip({html : true });});
   </script>
</div>

События

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

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

пример

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

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
   title = "Default Tooltip">Default Tooltip</a>.

<script>
   $(function () { $('.tooltip-show').tooltip('show');});
   
   $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
      alert("Alert message on show");
   })});
</script>