29

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

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

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

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

4

3 回答 3

29

这是一个非常简单的例子：

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

于 2012-08-16T19:19:25.020 回答
11

项目主页上的下载中包含的bootstrap.js版本已经包含编译到其中的所有插件。这包括bootstrap-tooltip.js和bootstrap-popover.js。

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

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

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

更新： 带有 Bootstrap v.3 的 JSFiddle

于 2012-08-16T22:03:18.643 回答
4

为什么 popover 和 tooltip 在 bootsrap 中不起作用？

答案是弹出框或工具提示初始化代码$("#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>
于 2013-11-21T09:40:45.310 回答