提示内容的方向
top | bottom | left | right | auto.
4种触发方式
click | hover | focus | manual
点击|漂过|焦点|手动
应用data属性
data-placement="right"
手动初始化popover功能（bootstrap基于性能考虑，没有主动开启此功能）
$(function(){
$("#btn_top").popover();
});
data属性可以在javascript中设置，是等效的
$(function(){
$("#btn_top").popover();
$("#btn_bottom").popover();
$("#btn_left").popover();
$("#btn_right").popover();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Default buttons from Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"
rel="stylesheet" media="screen">
<style>
body {
padding: 50px; /*边距*/
margin: 200px;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h2>Example of creating Modal with Twitter Bootstrap</h2>
<div class="well">
<button type="button" id="btn_left" class="btn btn-danger"
data-container="body" data-toggle="popover" data-placement="left"
data-animation="false" data-trigger="click"
data-content="It's so simple to create a tooltop for my website!"
data-original-title="Twitter Bootstrap Popover">
左左左
</button>
<button type="button" id="btn_top" class="btn btn-danger"
data-container="body" data-toggle="popover" data-placement="top"
data-animation="false" data-trigger="click"
data-content="It's so simple to create a tooltop for my website!"
data-original-title="Twitter Bootstrap Popover">
上上上
</button>
<button type="button" id="btn_bottom" class="btn btn-danger"
data-container="body" data-toggle="popover" data-placement="bottom"
data-animation="false" data-trigger="click"
data-content="It's so simple to create a tooltop for my website!"
data-original-title="Twitter Bootstrap Popover">
下下下
</button>
<button type="button" id="btn_right" class="btn btn-danger"
data-container="body" data-toggle="popover" data-placement="right"
data-animation="false" data-trigger="click"
data-content="It's so simple to create a tooltop for my website!"
data-original-title="Twitter Bootstrap Popover">
右右右
</button>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
//初始化popover
$(function(){
$("#btn_top").popover();
$("#btn_bottom").popover();
$("#btn_left").popover();
$("#btn_right").popover();
});
</script>
</body>
</html>
相关推荐
jQuery+bootstrap提示框插件Popover是一款支持上下左右显示提示信息的提示框代码，可以选择不同颜色样式。
通过添加自定义类来扩展Bootstrap工具提示和Popover。 适用于Bootstrap 3和Bootstrap 4 。 定义自己的定制类或使用预定义的定制类： 工具提示： .tooltip-primary ， .tooltip-success ， .tooltip-info ， ....
webui-popover是一款基于Bootstrap的轻量级弹出提示框Tooltip插件。该提示框插件可以和Bootstrap完美结合，但是并不一定需要和Bootstrap一起使用。它支持IE8以上的浏览器。
Bootstrap上下左右显示提示框代码是一款jQuery bootstrap的Popover提示框插件制作，支持不同颜色样式。 Bootstrap上下左右显示提示框代码 截图
主要介绍了BootStrap使用popover插件实现鼠标经过显示并保持显示框的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
Bootstrap上下左右显示提示框代码是一款jQuery+bootstrap的Popover提示框插件制作，支持不同颜色样式。 Bootstrap上下左右显示提示框代码 截图
Bootstrap 弹出框（Popover）插件 弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap ...
Tooltip采用的是hover方式弹出提示框（参见前一篇：Bootstrap学习总结笔记（18）– 基本插件之Tooltip提示工具），适合提示内容比较少的情况，要是内容较多，就可以应用Popover提示框。 <!DOCTYPE html> <...
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
Bootstrap上下左右显示提示框代码是一款jQuery+bootstrap的Popover提示框插件制作，支持不同颜色样式。
主要为大家详细解析了Bootstrap中tooltip、popover的使用方法，了解提示框、弹出框的实现原理，感兴趣的朋友可以参考一下
弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。本文给大家介绍BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法，喜欢的朋友参考下吧
Bootstrap弹出框插件，提供了一个扩展的视图，弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。 弹出框（Popover）与工具提示（Tooltip）类似，提供了一个...
弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。 如何创建弹出框 通过向元素添加 data-toggle=”popover” 来来创建弹出框。 title 属性的内容为弹出框的标题，data-...
您可以在 Modals（模态框）中使用 Popover（弹出框）和 Tooltip（工具提示插件）。 一、modal使用： 1.1、登录bootstrap官网，点击下载Bootstrap 1.2、导入对应的样式文件css 1.3、导入对应的js，需要导入bootstrap....
用法meteor add twbs:bootstrap-noglyph 需要 JavaScript（例如下拉菜单）或自定义 jQuery 插件（如工具提示或弹出框）的功能应该会自动运行。 如果它们在body以外的模板中不起作用，请确保在Template....
1.Bootstrap弹出框示例 <button type="button" class="btn btn...有时提示框内容较多，仅仅使用data-content,title,在html文档里写出来比较乱，我们可以借助提供的popover（）方法，实现对弹出框内容、样式的修改。