Bootstrap - плагин Popover

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

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

Применение

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

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

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

Via JavaScript - Включите всплывающие окна через JavaScript, используя следующий синтаксис -

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

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

пример

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

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover on left">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover on top">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover on bottom">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "right" 
      data-content = "Some content in Popover on right">
      
      Popover on right
   </button>
   
</div>

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

Параметры

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

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

Методы

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

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

пример

В следующем примере демонстрируются методы подключаемого модуля popover:

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default popover-show" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary popover-hide" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-hide method">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success popover-destroy" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover-destroy method">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning popover-toggle" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-toggle method">
      
      Popover on right
   </button>
	
   <br><br><br><br><br><br>
   
   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning" 
         title = "<h2>Title</h2>" data-container = "body" 
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</h4>">
         
         Popover
      </a>
   </p>
   
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
   </script>
	
</div>

События

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

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

пример

В следующем примере демонстрируются события плагина Popover -

<div clas = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-primary popover-show" 
      title = "Popover title" data-container = "body" data-toggle = "popover" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
</div>

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