bootstrap3-popover 提示框
提示内容的方向
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>