<body style="margin: 50px;"> <!--兩個特殊的屬性--> <div id="selection"> <a id="section" href="#" rel="tooltip" data-toggle="tooltip" title="<b>超文本標識符</b>">HTML5</a> <a id="section" href="#" data-toggle="tooltip" title="超文本標識符" >HTML5</a> </div> <div class="btn-group"> <button class="btn btn-default" data-toggle="tooltip" title="超文本標識符">左</button> <button class="btn btn-default" data-toggle="tooltip" title="超文本標識符">中</button> <button class="btn btn-default" data-toggle="tooltip" title="超文本標識符">右</button> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> //提示顯示在哪 $('button').tooltip({ delay:{ show:500, hide:100, }, container:'body', //沒有這句話，鼠標放上去提示框會被擠變形，這句話意思就是讓提示框的顯示區域可以為整個區域，而不是當前的盒子，這樣就不會擠到 }); //必須作用在父盒子才能使selector奏效 $('#selection').tooltip({ selector:'a[rel=tooltip]', }); </script>