Загрузочный статический popover

В документации по загрузке (http://getbootstrap.com/javascript/#popovers) они отображаются на странице, которая выглядит как статичная (перед примером, где она подключалась к кнопки).

Я хотел бы показать popover на моей странице как объяснение чему-то на моем сайте, но хотелось бы, чтобы он всегда показывался, без необходимости щелчка на нем.

как я могу показать статический popover, как они? не удалось найти вариант.

Спасибо

Ответ 1

Если вы проверите HTML-код, который использует Bootstrap в своих примерах, они просто удалили класс fade из элемента HTML и затем переопределили несколько стилей по умолчанию.

HTML

<div class="popover-example"> <!-- NEW -->
  <div class="popover top">
    <div class="arrow"></div>
    <h3 class="popover-title">Popover top</h3>
    <div class="popover-content">
      <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </div>
  </div>
</div>

CSS

.popover-example .popover {
  position: relative;
  display: block;
  margin: 20px;
}

DEMO

Ответ 2

Попробуйте следующее:

$('your_selector').popover('show');

Ответ 3

Нашел довольно простое решение (не уверен, что он лучший, но он выполняет свою работу).

В my popover html я добавил класс, который я назвал .static-popover:

<div class="popover left static-popover" id="testPopover">
    <div class="arrow"></div>
    <h3 class="popover-title">Popover left</h3>
    <div class="popover-content">
        <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </div>
</div>

класс css:

.static-popover { display: block !important; }

так как начальное местоположение popover div находится сверху: 0 и left: 0, в моем случае я создал определение css для "testPopover" с соответствующим верхним и левым для моих нужд.

Ответ 4

Мне нравится идея добавления класса static-popover. Имея это в виду, просто добавьте JS-функцию.

$('.static-popover').show().css('position','relative');

Ответ 5

Несколько иной подход - программно отображать его при загрузке страницы. И отключите событие hide ('hide.bs.popover') popover. Скажем, у меня есть форма (id = myForm), к которой я хотел связать popover. И я хочу, чтобы popover всегда показывал. Предполагая, что вы используете jquery, вы можете сделать следующее:

$("#myForm").popover();
$("#myForm").popover("show");

$('#myForm').on('hide.bs.popover', function () { return false;});