Question

有没有办法指定按钮同时作为下拉触发器和工具提示源？

我已经能够做到这一点，但不是两者兼而有之。我的下面的代码用作下拉列表，但是如果我将data-toggle="dropdown"重新定位到工具提示之前，那么它会呈现工具提示：

<button class="btn btn-sm dropdown-toggle"
            data-toggle="tooltip" data-toggle="dropdown"
            data-placement="bottom"
            title="Test Tooltip">

Answer 1

您可以通过任何属性，ID或类初始化工具提示，以避免与下拉列表交叉。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle-second="tooltip" data-placement="right" title="Tooltip on right">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

$('[data-toggle-second="tooltip"]').tooltip();

https://www.codeply.com/go/aFEQgHs1sC

Answer 2

你可以尝试制作类似这样的按钮data-toggle="tooltip"然后添加一个下拉列表

<ul class="nav navbar-nav">
 <li class="btn btn-sm dropdown" id="example" data-toggle="tooltip" data-placement="right" title="Test Tooltip" >  
   <a id="dropdown" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Im a drop down with a tooltip <span class="caret"></span></a>
     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown">
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Link or whatever</a></li>
     </ul>
 </li>
</ul>

$('#example').tooltip();

http://jsfiddle.net/h56xw8wq/67/

Answer 3

在这种情况下，我发现最简单的方法是将按钮的标签放在具有工具提示本身的范围内

<button class="btn btn-sm dropdown-toggle" data-toggle="dropdown">
  <span data-toggle="tooltip" title="Test Tooltip">
    Button label
  <span>
</button>

通过这种方式，按钮具有对click事件（包括在标签上）的切换操作，但标签具有工具提示事件，并且两个data-toggle属性位于不同的元素上，因此不会发生冲突。

Bootstrap 4 - 按钮上的下拉菜单和工具提示？

3 个答案: