引導工具提示懸停問題

Question

我施加的工具提示一個按鈕，是按鈕組的一部分，如：

<div class="btn-group pull-right"> 
     <button class="btn btn-primary btn-xs dropdown-toggle" aria-expanded="false" data-toggle="dropdown" data-tooltip="tooltip" data-placement="left" title="tooltip test 123"> 
     <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" role="menu" style="height: 200px; overflow-y: auto;"> 
     <li>Test</li> 
     </ul> 
</div> 

和JS：

$(function(){ 
    $(".btn").tooltip(); 
}); 

和jsfiddle：https://jsfiddle.net/4Lo9dkf2/

當您將鼠標懸停在該按鈕上時，您會看到工具提示位置不正確，您無法單擊該按鈕觸發下拉菜單。

我該怎麼辦？

Answer 1

不喜歡以下方式：

$(function(){ 
 
\t $(".btn-group").tooltip(); 
 
});

body { 
 
    width: 330px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="btn-group pull-right" data-toggle="tooltip" data-placement="left" title="tooltip test 123"> 
 
     <button class="btn btn-primary btn-xs dropdown-toggle" aria-expanded="false" data-toggle="dropdown"> 
 
     <span class="caret"></span> 
 
     </button> 
 
     <ul class="dropdown-menu" role="menu" style="height: 200px; overflow-y: auto;"> 
 
     <li>Test</li> 
 
     </ul> 
 
</div>

Fiddle

Answer 2

試試吧;

<div class="btn-group pull-right" style="position: absolute;"> 
    <button class="btn btn-primary btn-xs dropdown-toggle" aria-expanded="false" data-toggle="dropdown" data-tooltip="tooltip" data-placement="left" title="tooltip test 123"> 
     <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" role="menu" style="height: 200px; overflow-y: auto;"> 
     <li>Test</li> 
     </ul> 
</div>