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

试试吧;

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

Answer 2

请按以下方式进行：

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

当应用于按钮组的一部分按钮时，Bootstrap工具提示悬停问题

2 个答案: