На этом уроке мы научимся создавать всплывающие панели (popovers) к различным элементам веб-страницы с помощью Twitter Bootstrap.

Popover (всплывающая панель) – это небольшая панель, которая располагается поверх содержимого веб-страницы и предназначена для отображения дополнительной информации, которая появляется при нажатии левой кнопки мыши на элементе веб-страницы.

Перед использованием всплывающую панель (popover) необходимо инициализировать с помощью JavaScript. Это делается путём вызова метода Bootstrap popover() с указанием идентификатора (id) или класса (class) элемента, к которому Вы хотите добавить всплывающую панель.

<script type="text/javascript">
$(document).ready(function(){
  //Инициализация всплывающей панели для
  //элементов веб-страницы, имеющих атрибут
  //data-toggle="popover"
  $('[data-toggle="popover"]').popover({
    //Установление направления отображения popover
    placement : 'top'
  });
});
</script>

<!-- Кнопки с popovers -->
<button type="button" class="btn btn-primary" data-toggle="popover" title="Заголовок панели" data-content="Текст панели.">Кнопка с popover</button>
<button type="button" class="btn btn-danger" data-toggle="popover" title="Заголовок панели" data-content="Очень длинный текст, который демонстрирует максимальную возможную ширину всплывающей панели.">Кнопка с popover</button>
<button type="button" class="btn btn-info" data-toggle="popover" title="Заголовок панели" data-content="Текст панели.">Кнопка с popover</button>
<button type="button" class="btn btn-warning" data-toggle="popover" title="Заголовок панели" data-content="Очень длинный текст, который демонстрирует максимальную возможную ширину всплывающей панели.">Кнопка с popover</button>

Для всплывающей панели (popover) Вы можете установить направление отображение (вверх, вниз, влево или вправо) от элемента веб-страницы, который её вызывает.

Для позиционирования всплывающей панели с помощью Data API используется атрибут Bootstrap data-placement, который может принимать следующие значения: top (вверх), bottom (вниз), left (влево), right (вправо).

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

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Lorem ipsum dolor sit amet. Suscipit laboriosam, nisi ut perspiciatis.">
  Popover (вверх)
</button>
<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Lorem ipsum dolor sit amet. Suscipit laboriosam, nisi ut perspiciatis.">
  Popover (вниз)
</button>
<button type="button" class="btn btn-danger" data-container="body" data-toggle="popover" data-placement="left" data-content="Lorem ipsum dolor sit amet. Suscipit laboriosam, nisi ut perspiciatis.">
  Popover (слева)
</button>
<button type="button" class="btn btn-warning" data-container="body" data-toggle="popover" data-placement="right" data-content="Lorem ipsum dolor sit amet. Suscipit laboriosam, nisi ut perspiciatis.">
  Popover (вправо)
</button>

Для позиционирования всплывающей панели с помощью JavaScript используется параметр метода popover() placement, который может принимать следующие значения: 'top' (вверх), 'bottom' (вниз), 'left' (влево), 'right' (вправо).

<script type="text/javascript">
$(document).ready(function(){
  $(".popover-top").popover({
    placement : 'top'
  });
  $(".popover-right").popover({
    placement : 'right'
  });
  $(".popover-bottom").popover({
    placement : 'bottom'
  });
  $(".popover-left").popover({
    placement : 'left'
  });
});
</script>

<button type="button" class="btn btn-primary popover-top" data-toggle="popover" title="Заголовок панели" data-content="Текст панели.">Popover (вверх)</button>
<button type="button" class="btn btn-success popover-right" data-toggle="popover" title="Заголовок панели" data-content="Текст панели.">Popover (вправо)</button>
<button type="button" class="btn btn-info popover-bottom" data-toggle="popover" title="Заголовок панели" data-content="Текст панели.">Popover (вниз)</button>
<button type="button" class="btn btn-warning popover-left" data-toggle="popover" title="Заголовок панели" data-content="Текст панели.">Popover (слева)</button>

По умолчанию popovers не скрываются, пока вы не щёлкните левой кнопкой мыши на элементе веб-страницы, который им управляет, ещё раз.

Вы можете использовать атрибут data-trigger="focus", который скрывает popovers, когда пользователь делает следующий клик не на элементе, который им управляет, а за его пределами.

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

  • использовать тег <a>, а не <button>;
  • добавить атрибут tabindex в тег <a>.
<script type="text/javascript">
$(document).ready(function(){
  $('.popover-dismissible').popover({
    placement : 'top'
  });
});
</script>

<a href="#" tabindex="0" class="btn btn-warning popover-dismissible" role="button" data-toggle="popover" data-trigger="focus" title="Заголовок панели" data-content="Текст панели.">Ссылка с popover</a>
<a href="#" tabindex="0" class="btn btn-danger popover-dismissible" role="button" data-toggle="popover" data-trigger="focus" title="Заголовок панели" data-content="Текст панели.">Ссылка с popover</a>
<a href="#" tabindex="0" class="btn btn-primary popover-dismissible" role="button" data-toggle="popover" data-trigger="focus" title="Заголовок панели" data-content="Текст панели.">Ссылка с popover</a>
<a href="#" tabindex="0" class="btn btn-info popover-dismissible" role="button" data-toggle="popover" data-trigger="focus" title="Заголовок панели" data-content="Текст панели.">Ссылка с popover</a>

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

Имя Описание
animation Тип: boolean. Значение по умолчанию: true. Применяет эффект выцветания (CSS fade) к Popover (всплывающей панели). Данный параметр также можно установить с помощью атрибута data-animation. Например: data-animation="false".
html Тип: boolean. Значение по умолчанию: false. Параметр "html" предназначен для вставки в Popover (всплывающую панель) HTML-кода. Если установлено значение false, то будет использоваться метод "text" jQuery, который вставит содержимое в объектную модель документа (DOM) HTML. Пользуйтесь данным методом с осторожностью, так как в случае использования HTML вы можете подвергнуть свой сайт XSS-атакам. Данный параметр также можно установить с помощью атрибута data-html. Например: data-html="true".
placement Тип: string | function. Значение по умолчанию: 'right'. Параметр "placement" указывает на позиционирование Popover (всплывающей панели) и принимает следующие значения: top (вверх), bottom (вниз), left (влево), right (вправо), auto. Значение auto предназначено для динамического позиционирования Popover (всплывающих панелей). Например, если позиционирование задано как "auto left", то Popover (всплывающая панель) будет показываться слева от элемента, когда это возможно, в противном случае она будет отображаться справа от элемента. Данный параметр также можно установить с помощью атрибута data-placement. Например: data-placement="bottom".
title Тип: string | function. Значение по умолчанию: ''. Данный параметр задаёт текст заголовка Popover (всплывающей панели) . Данный параметр можно также установить с помощью атрибута title, например: title="Заголовок панели".
content Тип: string | function. Значение по умолчанию: ''. Данный параметр задаёт текст содержимого всплывающей панели Popover. Если значение параметра content или атрибута data-content не указать, то текст содержимого Popover (всплывающей панели) будет иметь значение по умолчанию, т.е. ''.
trigger Тип: string. Значение по умолчанию: 'click'. Параметр "trigger" определяет действия при которых Popover (всплывающая панель) будет отображаться или скрываться: click (при нажатии), hover (при наведении курсора), focus (при нахождении элемента в фокусе), manual (самостоятельное задание). При использовании нескольких значений параметра "trigger" разделите их между собой с помощью пробела. Данный параметр также можно установить с помощью атрибута data-trigger, например: data-trigger="click".
delay Тип: number | object. Значение по умолчанию: 0. Устанавливает время задержки при отображении и скрытии всплывающих панелей (Popovers) в миллисекундах. Данный параметр не применяется к параметру trigger со значением manual. При указании одного значения, время задержки применяется и для отображения и для скрытия. Структура параметра: delay: { show: 500, hide: 100 }. Данный параметр также можно установить с помощью атрибута data-delay. Например: data-delay="800".

Методы плагина Popover

Ниже приведены основные методы для плагина Popover.

Метод Описание
.popover(параметры) Этот метод добавляет параметры и активизирует указанные элементы как элементы с Popover. Например: $(#idelement).popover({ placement:'top' })
.popover('show') Этот метод отображает всплывающую панель (popover) у элемента, который задаётся с помощью идентификатора (например: id="idelement") или класса (например: class="classelement"). Например: $('#idelement').popover('show').
.popover('hide') Этот метод скрывает отображение всплывающей панели (popover) у элемента. Например: $('#idelement').popover('hide').
.popover('toggle') Этот метод отображает или скрывает (т.е. переключает) отображение всплывающей панели (popover) у элемента. Например: $('#idelement').popover('toggle').
.popover('destroy') Этот метод скрывает и удаляет всплывающую панель (popover) у элемента веб-страницы. Например: $('#idelement').popover('destroy').
<script type="text/javascript">
$(document).ready(function(){
  $("#myPopover").popover({
    title: 'Заголовок панели',
    content: 'Текст панели',
    trigger: 'hover',
    placement: 'right'
  });
});
</script>

<button type="button" class="btn btn-danger btn-lg" id="myPopover" data-toggle="popover">Кнопка с Popover</button>
<script type="text/javascript">
$(document).ready(function(){
  $(".popover-show").click(function(){
    $("#myPopoverMethod").popover('show');
  });
  $(".popover-hide").click(function(){
    $("#myPopoverMethod").popover('hide');
  });
  $(".popover-toggle").click(function(){
    $("#myPopoverMethod").popover('toggle');
  });
  $(".popover-destroy").click(function(){
   $("#myPopoverMethod").popover('destroy');
  });
});
</script>

<button type="button" title="Заголовок панели" class="btn btn-info btn-lg" id="myPopoverMethod" data-toggle="popover" data-content="Текст панели">Кнопка с Popover</button>
<br><br>
<input type="button" class="btn btn-info popover-show" value="Метод Show">
<input type="button" class="btn btn-warning popover-hide" value="Метод Hide">
<input type="button" class="btn btn-success popover-toggle" value="Метод Toogle">
<input type="button" class="btn btn-danger popover-destroy" value="Метод Destroy">


События для плагина Popover (всплывающая панель) представлены в следующей таблице.

Событие Описание
show.bs.popover Это событие срабатывает сразу после вызова метода show(). Например: $('#idPopover').on('show.bs.popover', function () { // сделать что-нибудь… })
shown.bs.popover Это событие срабатывает, когда popover (всплывающая панель) становится полностью видимым для пользователя (т.е. когда выполнены все CSS стили, необходимые для отображения всплывающей панели popover). Например: $('#idPopover').on('shown.bs.popover', function () { // сделать что-нибудь… })
hide.bs.popover Данное событие срабатывает сразу после вызова метода hide(). Например: $('#myPopover').on('hide.bs.popover', function () { // сделать что-нибудь… })
hidden.bs.popover Это событие срабатывает, когда popover (всплывающая панель) становится полностью скрытой для пользователя (т.е. когда выполнены все CSS стили, необходимые для скрытия всплывающей панели popover) Например: $('#myPopover').on('hidden.bs.popover', function () { // сделать что-нибудь… })
<script type="text/javascript">
$(document).ready(function(){
  //инициализирование popover
  $('#popover-event-hidden').popover({
    placement : 'top'
  });
  //обработчик события
  $('#popover-event-hidden').on('hidden.bs.popover', function(){
    alert("Popover была полностью скрыта от пользователя. Нажмите на кнопку ещё раз, чтобы снова увидеть popover.");
  });
});
</script>

<button type="button" id="popover-event-hidden" class="btn btn-lg btn-danger" data-toggle="popover" title="Заголовок панели" data-content="Текст панели">Кнопка с Popover</button>

Изображение, на котором изображен результат выполнения события hidden.bs.popover