                        課程
                    
                        /前端開發(fā)
                        
                            /Bootstrap
                        
                        /玩轉(zhuǎn)Bootstrap（JS插件篇）

為什么鼠標移上去后，按鈕會有一點點的移動

???

Dear陳

2017-01-11

源自：玩轉(zhuǎn)Bootstrap（JS插件篇） 3-8

關(guān)注問題我要回答

2335

操作

收起

2 回答

Dear陳提問者
2017-02-06

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title>提示框</title>
<meta?name="viewport"?content="width=device-width,minimun-scale=0.5,maximun-scale=1.0,initial-scale=1.0,user-scalable=no"/>
<link?rel="stylesheet"?href="css/bootstrap.min.css"?/>
?<style>
?*{margin:0px;padding:0px;}
??body?{
????padding:?100px;
??}
??.btn?{
????margin:?20px?10px?20px;
??}
??</style>
</head>???
<body>
<h3>按鈕做的提示框</h3>
??<button?type="button"?
??????????class="btn?btn-default"?
??????????data-toggle="tooltip"?
??????????data-placement="left"?
??????????title="自拍"
??????????data-original-title="提示框居左"?
??????????>
??提示框居左??????
??</button>

?<!--??-->
??<button?type="button"?
??????????class="btn?btn-default"?
??????????data-toggle="tooltip"?
??????????data-placement="top"?
??????????data-original-title="提示框在頂部">
???提示框在頂部
??</button>
??<button?type="button"?
??????????class="btn?btn-default"?
??????????data-toggle="tooltip"?
??????????data-placement="bottom"?
??????????data-original-title="提示框在底部">
??提示框在底部?????????????
??</button>
??<button?type="button"?
??????????class="btn?btn-default"?
??????????data-toggle="tooltip"?
??????????data-placement="right"?
??????????data-original-title="提示框居右">
??提示框居右??????
??</button>
??<h3>鏈接制作的提示框</h3>
??<a?class="btn?btn-primary"?
?????data-toggle="tooltip"?
?????data-placement="left"?
?????title="提示框居左">
?????提示框居左
??</a>
??<a?class="btn?btn-primary"?
?????data-toggle="tooltip"?
?????data-placement="top"?
?????title="提示框在頂部">
?????提示框在頂部
??</a>
??<a?class="btn?btn-primary"?
?????data-toggle="tooltip"?
?????data-placement="bottom"?
?????title="提示框在底部">
?????提示框在底部
??</a>
??<a?class="btn?btn-primary"?
?????data-toggle="tooltip"?
?????data-placement="right"?
?????title="提示框在居右">
?????提示框居右
??</a>
??<a?href="##"?
?????class="btn?btn-primary"?
?????id="myTooltip">
?????我是提示框
??</a>
??<a?href="##"?
?????class="btn?btn-primary"?
?????id="myTooltip2">
?????我是提示框2
??</a>

??<h4>data-animation="true"</h4>
??<button?type="button"?
??class="btn?btn-default"?
??data-toggle="tooltip"?
??data-placement="left"?
??data-original-title="data-animation='true'"
??data-animation="true">data-animation="true"</button>
??
??<h4>data-html="true"</h4>
??<button?type="button"?
??class="btn?btn-default"?
??data-toggle="tooltip"?
??data-placement="top"?
??data-original-title="<h1>data-html='true'</h1>"
??data-html="true">data-html="true"</button>
??
??<h4>data-trigger="click"</h4>
??<button?type="button"?
??class="btn?btn-default"?
??data-toggle="tooltip"?
??data-placement="bottom"?
??data-original-title="data-trigger='click'"
??data-trigger="click"
??data-delay=2000>data-trigger="click"</button>
??
</body>
<script?src="js/jquery-3.1.1.min.js"></script>
<script?src="js/bootstrap.min.js"></script>
<script>
$(function(){
????$('[data-toggle="tooltip"]').tooltip();
????$('#myTooltip').tooltip({
??????title:"我是一個提示框，我在頂部出現(xiàn)",
??????placement:'top'
????});
????$('#myTooltip2').tooltip({
??????title:"我是一個提示框，我在底部出現(xiàn)",
??????placement:'bottom'
????});
});

</script>
</body>
</html>