<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>