Загрузочный опрос

Я не уверен, как boostrap реализует popover. Я включил bootstrap.js, и у него есть функция Popover (верхний регистр P), но в их примере они используют:

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

Теперь они говорят, что нужно включить всплывающую подсказку, но я не знаю, что это значит. Их примеры включают в себя кучу файлов .js, и я думаю, что на самом деле все они упакованы вместе.

И так как я на стадии доказывания концепции, где я пытаюсь заставить его работать в первый раз, меня не интересует размер файла или кеширование.

Ответы

Ответ 1

Вот довольно простой пример:

<html> 
   <head>
       <link href="http://w3resource.com/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
   </head>
   <body>
      <div class="container">
         <div class="well">
            <a href="#" id="example" class="btn btn-success" rel="popover" data-content="It so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
         </div>
      </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script src="http://w3resource.com/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
      <script src="http://w3resource.com/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
      <script>
      $(function (){
         $("#example").popover();
      });
      </script>
   </body>
</html>

В этом примере вам также будет предложен JavaScript-код всплывающей подсказки. Просто просмотрите источник страницы.

Ответ 2

В версии bootstrap.js, которая включена в загрузка, найденная на главной странице проекта, уже включены все плагины, скомпилированные в него. Это включает bootstrap-tooltip.js и bootstrap-popover.js.

Popover - это объект-конструктор для плагина jQuery, но вам не нужно создавать его напрямую.

Плагин расширит jQuery, добавив метод $.fn.popover(), который при вызове создаст экземпляр объекта Popover и привяжет его к выбранному элементу. К этому объекту можно получить доступ к вашему элементу (например, id="elem") с помощью $('#elem').data('popover').

Вот простой JSFiddle, который демонстрирует один способ создания всплывающего окна, в основном используя то, что у вас было в OP, $('#elem').popover().

Обновление: JSFiddle с Bootstrap v.3

Ответ 3

Почему popover и всплывающая подсказка не работают в bootsrap?

Ответ: popover или код инициализации всплывающей подсказки $("#myButton").popover(); должен находиться под <script src="js/jquery-1.10.1.min.js"></script>; и <script src="js/bootstrap.min.js"></script>.

Как и следующая процедура. Я думаю, будет хорошо.

<button type="button" id="myPopover" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
      Popover on Right
</button>

<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>

<script type="text/javascript">
      $('#myButton').tooltip();
      $('#myPopover').popover();
</script>