Phi*_*enn 29 twitter-bootstrap
我不确定boostrap如何实现popover.我已经包含了bootstrap.js,它有一个名为Popover(大写P)的函数,但在他们的例子中,它们使用:
$('#example').popover(options)
现在,他们说它需要包含工具提示,但我不知道这意味着什么.他们的例子都包括一堆.js文件,我认为实际上它们都是打包在一起的.
而且由于我处于概念验证阶段,我试图让它第一次正常工作,我并不关心文件大小或缓存.
ews*_*001 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.只需查看页面的来源即可.
mer*_*erv 11
在项目主页上找到的下载中包含的bootstrap.js版本已经包含了编译到其中的所有插件.这包括bootstrap-tooltip.js和bootstrap-popover.js.
Popover 是jQuery插件的构造函数对象,但您不需要直接实例化它.
该插件将扩展jQuery,添加该方法$.fn.popover(),该方法在调用时将创建一个Popover对象的实例并将其附加到您选择的元素.可以使用您的元素(例如id="elem")访问该对象$('#elem').data('popover').
这是一个简单的JSFiddle,它演示了一种创建弹出窗口的方法,基本上使用了OP中的内容$('#elem').popover().