Bootstrap 3 - Всплывающая панель (popover)

На этом уроке мы научимся создавать всплывающие панели (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



   Bootstrap 0    23154 0

Комментарии (36)

  1. Егор # 0
    Здравствуйте. А есть ли возможность внутрь подсказки кроме текста поставить ссылку?
    1. Александр Мальцев # +1
      Здравствуйте. Да можно, для этого необходимо включить соответствующий параметр (html:'true'):
      <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Заголовок" data-content="<p>Ссылка на сайт:</p><a href='http://itchief.ru'>itchief.ru</a>">popover</button>
      <script>
      $(function () {
        $('[data-toggle="popover"]').popover({html:'true'})
      })
      </script>
      
      1. Егор # 0
        Так это-же просто :0 Как-бы включается поддержка Html.
        Надо изучить JawaScript
        1. Александр Мальцев # 0
          Да, обязательно изучи.
          Так как язык JavaScript – это неотъемлемая часть веб-страниц как HTML и CSS.
          HTML – разметка страницы, CSS – оформление страницы (внешний вид), JavaScript — управление страницей.
          Веб-страница без JavaScript — это то же самое, что автомобиль без руля.
    2. Егор # 0
      Спасибо! А то я ставил иконку avesome, круглый значек с буквой I, обернутую в ссылку, tooltip.
      При наведении всплывала подсказка небольшая и надо кликать иконку за дополнительной информацией. Мне сказали, что люди не догадываются :)
      1. julja # 0
        Это обязательно должна быть кнопка? может popover, например, возникать при наведении на картинку или, скажем, некий див?
        Мне понравился сайт reallygood.co.il/. там есть блок с отзывами, хотелось бы сделать что-то подобное, используя бутстрап, а тут как раз popover попался.
        1. Александр Мальцев # 0
          Вы можете использовать popovers для любого элемента. Настройка popover производится с помощью параметров, которые приведены в этом уроке.

          Например, инициализируем popovers для элементов, которые имеют атрибут data-toggle=«popover».
          <div data-toggle="popover" title="Заголовок popover сообщения" data-content="Текст popover сообщения"  
          >...</div>
          <img src="image1.png" alt="" data-toggle="popover" title="Заголовок popover сообщения" data- 
          content="Текст popover сообщения">
          
          <script>
          $(function () {
            //указываем с помощью селектора, для каких элементов необходимо инициализировать popover
            $("[data-toggle='popover']").popover({
              //указываем когда будет отображаться popver. В данном случае при поднесении курсора к элементу
              trigger: 'hover'
            });
          })
          
          Т.е. с помощью вышеприведённого сценария у Вас будут инициализировать любые элементы, у которых есть данный атрибут:
          data-toggle="popover"
          
          Выбирать элементы, которые необходимо инициализировать, можно не только с помощью атрибута, а вообще как угодно.

          Например, инициализировать Popover для всех изображений расположенных в контейнере с id=«comment»
          $(function () {
            $("#comment img").popover({
              trigger: 'hover'
            });
          });
          
        2. Артем # 0
          Подскажите пожалуйста возможно ли при помощи бустрап сделать следующие вещи.


          То есть по сути выдвигающийся справа блок с функционалом определенным. По структуре это считай что popover. Как сделать такое со своей версткой + Jquery знаю, интересует именно с помощью бустрап верстки. Спасибо
          1. Александр Мальцев # 0
            Да, такое сделать возможно.
            1. Артем # 0
              А с помощью какого встроенного функционала в bootstrap это удобнее всего не подскажите?
              Чтоб было понятнее, я имею ввиду, когда эта панель целиком или частично находится за пределами видимости страницы. Например спрятана в правой части страницы, или же сверху и при клике на нее или какую то соотвествующую кнопку выдвигается и показывается в полной мере. Есть ли встроенный функционал у бутстрап, который бы помог такое реализовать
              1. Александр Мальцев # 0
                Извините, что не совсем понял Ваш вопрос.

                Весь функционал Twitter Bootstrap сосредоточен в классах и плагинах, которые предназначены для решения наиболее распространённых задач стоящих перед разработчиками. Кроме этого он также содержит готовые компоненты.

                Начнём с разметки Ваших блоков. Для их выполнения нужен HTML, классы Bootstrap, ну и стили CSS. Bootstrap не отменяет HTML или CSS, просто с ним (используя его классы) Вы можете это сделать немного быстрее и везде нормально отображающимся. Т.е. Bootstrap содержит классы, компоненты и плагины, которые работают во всех браузерах и на всех возможных устройствах. Что нельзя сказать про блоки, которые разработчик создаёт сам, т.к. проверить их во всех браузерах и на всех устройствах одну или двум разработчикам очень тяжело. Так что нет гарантии, что везде ваш блок будет отображаться нормально. Поэтому может, есть смысл попробовать переписать разметку этих блоков с использованием классов Bootstrap.

                Ситуацию с динамической составляющей этого блока средствами Bootstrap не решить, т.к. такого плагина нет. Тут можно использовать jQuery.

                В большинстве случаев, если Вы хотите реализовать какой-то дополнительный функционал, то необходимо либо искать готовые решения, либо создавать их самому (конечно с применением классов и плагинов Twitter Bootstrap).
                1. Артем # 0
                  Спасибо, за подробный ответ. Как разметку такого блока на bootstrap сделать я разобрался. Это гораздо быстрее чем самому верстать. Ну значит буду свой JQuery подключать. Просто думал, что возможно разработчики предусмотрели такие плагины, так как они сейчас довольно распространены.
                  1. Сергей # 0
                    Артем, есть сторонний плагин:
                    plugins.adchsm.me/slidebars/usage.php

                    Если это не тот вариант, то можно поискать варианты реализации в expo.getbootstrap.com/ и уже на основе кода примеров копать в нужную сторону.
            2. W.D.M.Group # 0
              Можно, вполне.

              Из самого сложного, с чем столкнётесь — это блур бэкграунд. В идеале он должен быть динамическим, исходя из задачи иллюстрируемой на картинках. Как вариант html2canvas + gaussian blur и всё это в localStorage )). Ну или поиграться с нативным блуром через CSS, если у вас плашки поверх карусели.
            3. Владимир # 0
              Здравствуйте!
              Подскажите, пожалуйста, можно ли с помощью этого инструмента во всплывающем снизу или сверху (как настроить так чтобы для каждой ссылки можно было выбирать место отображения?) окошке показывать содержимое какого-нибудь скрытого блока (например с небольшой формой?? Например как с модальным окном — его содержимое сначала выводится в скрытом блоке, а при клике по ссылке появляется окно — блок становится видимым? Вот хотелось бы чтобы был такой же блок с нужным кодом, но который показывался бы рядом с тем элементом, по которому произведён клик. И чтобы не писать весь код в data-content="".
              И как сделать чтобы это окошко закрывалось сразу несколькими способами, т.е. при любом из следующих событии:: повторный клик по открывающему элементу, клик мимо окна, клик по закрывающей кнопке расположенной в этом открывшемся окошке.
              Ваш вариант с
              $("#myPopover").popover({
                  title: 'Заголовок панели',
                  content: 'Текст панели',
                  trigger: 'hover',
                  placement: 'right'
                });
              Не совсем то, т.к. прописывать текст нужно в скрипте, а хотелось бы динамически на разных страницах использовать разный контент, но в одном, универсальном инструменте.
              Спасибо!
              1. Александр Мальцев # 0
                Здравствуйте, Владимир!
                Ответы на Ваши вопросы:
                1. Настройка отображения popover осуществляется с помощью атрибута data-placement, которая может принимать одно из четырёх значений: left, top, bottom, right.
                Например:
                <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="...">
                  ...
                </button>
                
                2. Создаём скрытый блок.
                Например:
                <div id="mypopover" style="display: none;">
                  <!-- Содержимое, которое будем выводит в popover -->
                  <div class="alert alert-danger">Содержимое...</div>
                </div>
                
                Создаём popover, при нажатии на который будет выводиться в нём содержимое элемента, идентификатор которого указан в data-contentwrapper:
                <a class="btn btn-danger" data-toggle="popover" data-trigger="focus" title="Название Popover" data-contentwrapper="#mypopover">Мой popover</a>
                
                Пишем скрипт для инициализации всех popover:
                <script>
                $(function () {
                  $('[data-toggle="popover"]').popover({
                    html:'true',
                    content: function() {  return $($(this).data('contentwrapper')).html(); }
                  })
                })
                </script>
                
                3. Про события…
                Необходимо написать скрипт:
                <a tabindex="0" role="button" class="btn btn-lg btn-danger" data-container="body" data-
                toggle="popover" data-contentwrapper=".div">Dismissible popover</a>
                <div id="mypopover" style="display: none;">
                  <!-- Содержимое, которое будем выводит в popover -->
                  <div class="alert alert-danger">Содержимое...</div>
                </div>
                
                <script>
                $(function () {
                  $('[data-toggle="popover"]').popover({
                    html:'true',
                    content: function() {  return $($(this).data('contentwrapper')).html(); },
                    trigger: 'click'
                  })
                });
                
                $('html').on('click', function(e) {
                  if (typeof $(e.target).data('original-title') == 'undefined' &&
                    !$(e.target).parents().is('.popover.in')) {
                    $('[data-toggle="popover"]').popover('hide');
                  }
                });
                </script>
                
              2. Денис # 0
                Доброй ночи.
                Нужно вставить html код в popover попробовал этим кодом что вы указали
                <script>
                $(function () {
                  $('[data-toggle="popover"]').popover({html:'true'})
                })
                </script>
                Не работает сайт 500 ошибка думаю дело в этом
                {html:'true'}
                без него все ок работает просто текст но нужно очень html вставить. Если есть решение помогите буду благодарен. Движок Simpla
                1. Александр Мальцев # 0
                  Здравствуйте, Денис.
                  Попробуйте обернуть скрипт в тег {literal}{/literal}. В этом случае весь текст внутри тэгов {literal}{/literal} не интерпретируется, а выводится как есть. А иначе фигурные скобки будут конфликтовать…
                  {literal}
                  <script>
                  $(function () {
                    $('[data-toggle="popover"]').popover({html:'true'})
                  })
                  </script>
                  {/literal}
                  
                2. Denis # 0
                  Думаю можно вставить в Повер кнопку и оперировать с нею?!
                  1. Денис # 0
                    А подскажите, как сделать так чтобы вывести popover на уровне элемента к которому он добавлен? Получается так что он централизуется и весь его контент лезет вверх :( Тем самым перекрывая navbar :(
                    1. Александр Мальцев # 0
                      Попробуйте настроить положение popover с помощью атрибута data-placement.
                    2. Денис # 0
                      Добрый день, есть такая задача прошу помощи,

                      Нужно чтобы при нажатии на кнопку например купить появился по центру экрана div блок с содержимым и через 6 секунд он медленно пропадает, можно ли такое делать на js или bootstrap если можно приложите код, а то js не очень знаю заранее спасибо
                      1. Александр Мальцев # 0
                        Добрый.
                        Для этого лучше использовать компонент alert, а не popover.
                        HTML-код:
                        <!-- кнопка Купить -->
                        <button id="btn-buy" class="btn btn-danger">Купить</button>
                        <!-- Сообщение -->
                        <div id="message" class="alert alert-danger" style="display:none; position:fixed; top:50%; left:50%;">Сообщение</div>
                        
                        JavaScript-код:
                        $(function() {
                          // при нажатию на кнопку btn-buy
                          $('#btn-buy').click(function() {
                            // 400мс - время появления, 6000мс задержка, 2000мс - исчезновение
                            $('#message').fadeIn({'duration':400,'start':function(){
                               $('#message').css('margin-left',-$(this).outerWidth()/2);
                               $('#message').css('margin-top',-$(this).outerHeight()/2);
                            }}
                            ).delay(6000).fadeOut(2000);
                          });
                        });
                        
                        Стили элемента #message при желании можно вынести в отдельный файл.
                      2. Игорь Денисов # 0
                        Добрый вечер Александр.
                        У меня возник такой вопрос…
                        Есть кнопка:
                        <a href="#" class="btn btn-info"></a>
                        
                        и js:
                        $('a').popover({
                        	'title': 'Заголовок...',
                        	'content': 'Содержимое...',
                        	'placement': 'bottom'
                        });
                        
                        Теперь суть вопроса:
                        Как управлять временем анимации появления панели и исчезновения панели?!
                        Или только через css?
                        Заранее спасибо Вам за ответ.
                        1. Александр Мальцев # 0
                          Добрый вечер, Игорь.
                          Настроить количество секунд для анимации при появлении popover можно с помощью переопределения класса fade:
                          .popover.fade {
                            -webkit-transition: opacity .15s linear;
                            -o-transition: opacity .15s linear;
                            transition: opacity .15s linear;
                          }
                          
                          Вместо 0.15 секунд установите необходимое время.

                          Если Вам необходимо ещё на закрытие, то тогда наверно будет лучше изменить это в самом файле bootstrap.js (или bootstra.min.js). За это дело в файле bootstrap.js отвечает константа Tooltip.TRANSITION_DURATION в разделе Tooltip. Если измените её значения она повлияет как на открытие, так и на закрытие. Если необходимо установить разные значения, то необходимо будет найти в этом разделе строчки .emulateTransitionEnd(Tooltip.TRANSITION_DURATION) и установить в скобках необходимые значения в мс.
                          1. Игорь Денисов # 0
                            Ясно. Спасибо за ответ.
                        2. Виктор Успенский # 0
                          Здравствуйте.
                          Можете разъяснить один момент или отправить меня в примерном направлении?

                          Дело такое:

                          Присутствует кнопка, которая выводит форму. У данной кнопки имеется тег onclick, который запускает функцию «OneClickForm». Скрипт работает, форма генерируется, но выводится в никуда. Как мне удалось выяснить, ранее данная форма «OneClickForm()» выводилась через всплывающую панель Popover, входящую в состав Twitter Bootstrap. Ниже по скрипту встречается функция, которая скрывает данную панель.
                          function CloseOneClick() {
                          	$('.btn-1-click').popover('hide');
                          	return false;
                          	}
                          
                          Всё, что необходимо сделать — обернуть то, что выводит функция OneClickForm() во всплывающую панель Popover.

                          Данные, которые выводятся в popover, указываются в теге data-content. А функция запускается через тег oneclick. Как бы это совместить? Я не нашёл в документации этого. Но я уверен, работало всё именно так. Я видел внешний вид всплывающего окна и могу с точностью утверждать, что использовались стандартные стили всплывающей панели Popover, входящей в состав Twitter Bootstrap.
                          1. Александр Мальцев # 0
                            Здравствуйте. Не совсем понял описание. Поэтому поясните, что именно необходимо сделать? Т.е. имеется кнопка, которая открывает и закрывает всплывающую панель. Это панель относится к кнопке или какому-то другому элементу? Если необходимо совместить открытие и закрытие, то тогда используйте toggle. Лучше напишите, что Вы хотите реализовать, а не то как это было сделано.
                          2. Сергей Горин # 0
                            Здравствуйте, Александр!
                            Подскажите, как сделать, чтобы в popover выводилось содержимое в виде изображения, или изображения с текстом?
                            1. Александр Мальцев # 0
                              В статье все параметры перечислены. Для вставки HTML-содержимого используйте data-атрибут html:
                              <a class="btn btn-danger" role="button" data-toggle="popover" data-trigger="focus" data-html="true" title="Заголовок" data-content="<p>Текст</p><img src='image.jpg' width='50'>">Кнопка</a>
                              
                              <script>
                              // скрипт для инициализации popover после загрузки страницы
                              $(function () {
                                $('[data-toggle="popover"]').popover();
                              })
                              </script>
                              
                              1. Сергей Горин # 0
                                Большое спасибо, Александр!
                            2. Александр # 0
                              Добрый день.
                              А можно создать новое позиционирование для popover?
                              Что-то у меня никак не получается. Нужно чтобы popover отображался справа, но центровался не посередине а прижимался к верхней границе.

                              Добавил в tooltip.js:
                              case 'right-top':
                              tp = {top: pos.top, left: pos.left + pos.width}
                              break
                              Подключил скрипт, вызываю новое позиционирование, но никак. Такое ощущение что на подключенный скрипт никак не реагирует вообще.

                              Спасибо.
                              1. Александр # 0
                                Сам спросил — сам ответил)

                                Переделал вывод на тултипы, все заработало. Видимо popover еще как-то должен отдельно цеплять новый скрипт…
                              2. Николай # 0
                                Здравствуйте! Может быть сталкивались с такой проблемой: popover привязываю к ячейке таблицы, и при появление popover следующая ячейка сдвигается вправо на ширину одной колонки, после hide() все возвращается на место
                                1. Александр Мальцев # 0
                                  Привязывайте popover не к ячейки, а к содержимому ячейки, предварительно обернув его в какой-то элемент.
                                  1. Николай # 0
                                    Получилось, спасибо большое!

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