Question

我不确定boostrap如何实现popover。我已经包含了bootstrap.js，它有一个名为Popover（大写P）的函数，但是在他们的例子中，它们使用：

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

现在，他们说它需要包含工具提示，但我不知道这意味着什么。他们的例子都包括一堆.js文件，我认为实际上它们都是打包在一起的。

由于我处于概念验证阶段，我试图让它第一次正常工作，我并不关心文件大小或缓存。

Answer 1

Here's a pretty simple example：

<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's 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。只需查看页面的来源。

Answer 2

the download found on the project's homepage中包含的 bootstrap.js 版本已包含编译到其中的所有插件。其中包括 bootstrap-tooltip.js 和 bootstrap-popover.js 。

Popover是jQuery插件的构造函数对象，但您不需要直接实例化它。

该插件将扩展jQuery，添加方法$.fn.popover()，该方法在调用时将创建一个Popover对象的实例并将其附加到您选择的元素。可以使用id="elem"在您的元素（例如$('#elem').data('popover')）上访问该对象。

这是一个简单的JSFiddle，演示了创建弹出窗口的一种方法，基本上使用了OP中的内容$('#elem').popover()。

更新： JSFiddle with Bootstrap v.3

Answer 3

为什么popover和tooltip在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>

bootstrap popover

3 个答案: