Как вы программируете popovers в твиттере-начальной загрузке?

Question

Как вы программируете popovers в twitter-bootstrap? Я ищу пошаговый набор инструкций для активации всплывающего окна с помощью JavaScript.

Answer 1

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

Убедитесь, что ваш документ связан с плагином popover и плагином всплывающей подсказки, если нет, то сделайтессылка на эти файлы с использованием следующего:

    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>

Вставьте вышеуказанные коды чуть выше тега закрывающего тела, например так:

    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>

    </body>

Затем вставьте этот скрипт выше тега закрывающего тела:

    <script type="text/javascript">
     $(function() {$("a.pop").popover({ animation: true, placement: 'left', trigger: 'hover' })});

В общем, вставленные вами коды должны выглядеть следующим образом:

    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>

    <script type="text/javascript">
      $(function() {
      $("a.pop").popover({ animation: true, placement: 'left', trigger: 'hover' })});
    </script>

    </body>

Теперь разметьте ваши якорные теги для функциональности pop.Вот так:

<a href="#" class="pop" title="Pop!" data-content="Some Content">

Пояснение, data-content="" содержит содержимое всплывающего окна.title="Pop!" содержит заголовок заголовка.

class="pop" - это любое имя класса по вашему выбору, но не забудьте сопоставить имя с именем класса, найденным в приведенном выше сценарии, то есть $("a.pop")

Если вы предпочитаете использовать идентификатор, то это будет примерно так:

 <a href="#" id="pop" title="Pop!" data-content="Some Content">

и ...

    <script type="text/javascript">
      $(function() {
      $("a#pop").popover({ animation: true, placement: 'left', trigger: 'hover' })});
    </script>

В этом примере кода будет отображаться всплывающее окно слева, Если вы хотите переместить его в другие стороны, то измените размещение: «влево» на ie размещение: «сверху»

Answer 2

Я взял его из исходного кода страницы примера начальной загрузки:

$(function () {
  $("a[rel=popover]")
    .popover({
      offset: 10,
      html: true
    })
    .click(function(e) {
      e.preventDefault()
    })
})

Вы также можете попробовать заменить

$("a[rel=popover]")

на элемент, который должен отображать всплывающее окно.