BootStrap学习笔记–初始化tooltip和popover

学习BootStrap时候通过官方文档知道了自带的很好看的工具提示(tooltip)和弹出提示框(popover),鼠标移上去或者点击一段文字/按钮后就有弹出效果,见图1、图2。

官方tooltip例子

图1:官方tooltip例子

官方popover例子

图2:官方Popover例子

但是自己在写代码的时候发现就算按照官网上例子写,却怎么也显示不出效果,鼠标点击一点反应都没有。

想要实现popover的代码如下:

[html]
<a href="#" class="btn" data-toggle="popover" data-placement="right" data-title="说明" data-content="这是一段说明内容">点击我</a>
[/html]

再仔细看文档,发现有这么两句话:

For performance reasons, the tooltip and popover data-apis are opt in, meaning you must initialize them yourself.

For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.

意思是Tooltip?和 Popover 默认是关闭的,需要手动调用激活。

最后解决方法是写了一段js代码(放在<head>里):

[html]
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<script type=’text/javascript’>
function initial(){
$("a[data-toggle=popover]").popover();
};
$(document).ready(initial);
</script>
[/html]

当整个页面载入完成后,调用initial()函数,找到所有标记了data-toggle=popover的a元素,激活popover功能。

ps,这段代码是jQuery形式的,jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程。BootStrap本身就引用了jQuery库,因此我们自己也可以写jQuery来简化代码。

效果图

效果图

【参考资料】http://stackoverflow.com/questions/9446318/bootstrap-tooltips-not-working

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

20 − 9 =