Bootstrap 弹出框

Question

Bootstrap 弹出框

29

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

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

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

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

- Phillip Senn

当我输入 $('#myId').popover(); 时，出现 TypeError: $("#myId").popover 不是一个函数。 - Phillip Senn

如果您下载了bootstrap-popover.js文件，那么popover的定义（即函数）将从第77行开始定义。 - uday

哦，所以我必须包含bootstrap.js、bootstrap-tooltip.js和bootstrap-popover.js这三个文件吗？ - Phillip Senn

是的!!!全部三个...弹出框扩展了bootstrap-tooltip。请参考bootstrap-popover.js第37行。 - uday

哎呀！他们为什么不能给我们初学者包含它呢？ - Phillip Senn

显示剩余3条评论

3个回答

11

bootstrap.js 的版本已经包含在该项目主页上下载的文件中，其中已经编译了所有插件。其中包括 bootstrap-tooltip.js 和bootstrap-popover.js 。 Popover 是 jQuery 插件的构造对象，但您不需要直接实例化它。

该插件将扩展jQuery，添加方法 $.fn.popover() 。当调用该方法时，将创建指向所选元素的弹出窗口对象并将其附加到该元素上。可以使用 $（'#elem').data('popover') 在元素上访问该对象（例如，id =“ elem”）。

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

更新：Bootstrap v.3的JSFiddle。

- merv

4

为什么Bootstrap中的弹出框和提示框不起作用？

答案是，弹出框或提示框初始化代码$("#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>

- Zin Mi Tun

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ews2001 · Accepted Answer

这里有一个相当简单的例子：

<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。只需查看页面的源代码即可。