弹出框--提示框和弹出框的异同，玩转Bootstrap（JS插件篇）教程-慕课网

弹出框--提示框和弹出框的异同

从之前的学习可知，弹出框中HTML自定义的 data 属性和提示框中的自定义的 data 属性基本相同，只不过在其基础上增加了一个 data-content 属性，用来设置弹出框的内容。其实两插件也有略微的不同：

两个插件的显示模板不同：

提示框tooltip的模板：

<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner"></div>
</div>

弹出框popover的模板：

<div class="popover" role="tooltip">
    <div class="arrow"></div>
    <h3 class="popover-title"></h3>
    <div class="popover-content"></div>
</div>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>提示框和弹出框的异同</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body{
padding: 5%;
}
</style>
</head>
<body>
<h3>提示框</h3>
<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="right"
data-original-title="提示框居左"
title="">
提示框居左
</button>
<h3>弹出框</h3>
<button type="button"
class="btn btn-default"
data-toggle="popover"
data-placement="right"
title="提示框居左"
data-content="我是弹出框的内容">
猛击我吧
</button>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function(){
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>

弹出框--提示框和弹出框的异同