彈出框--提示框和彈出框的異同
從之前的學習可知，彈出框中HTML自定義的 data 屬性和提示框中的自定義的 data 屬性基本相同，只不過在其基礎上增加了一個 data-content 屬性，用來設置彈出框的內(nèi)容。其實兩插件也有略微的不同：
- 提示框 tooltip 的默認觸發(fā)事件是 hover 和 focus，而彈出框 popover 是 click
- 提示框 tooltip 只有一個內(nèi)容(title)，而彈出框不僅可以設置標題（title）還可以設置內(nèi)容(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="我是彈出框的內(nèi)容">
猛擊我吧
</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>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
