javascript - 应用于属于按钮组的按钮时，Bootstrap 工具提示悬停问题

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(){
	$(".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