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

【问题标题】：Bootstrap 4 - Dropdown AND Tooltip on Button?Bootstrap 4 - 按钮上的下拉菜单和工具提示？
【发布时间】：2018-10-25 11:36:05
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript html bootstrap-4

【解决方案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

【讨论】：

我喜欢这种优雅的方法......而且它不需要额外的点击处理程序来隐藏工具提示。

【解决方案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/

【讨论】：

所以你建议使用包装组件？我曾想过这一点，但工具提示仍然存在并覆盖了下拉菜单。我必须手动隐藏它，这很难看。
另外，您使用的是什么浏览器？我正在使用 Chrome 和 Firefox，而小提琴没有显示工具提示...
@theMayer 我正在使用 Chrome，但这不应该影响小提琴中的任何内容。我一直在使用工具提示进行测试，但如果工具提示位于按钮的底部，我没有找到让工具提示不覆盖下拉菜单的方法。
有时下拉菜单实际上会向上扩展，如果窗口很小或控件靠近页面底部，这让我很沮丧
@theMayer 我明白了。 Den Potapov 他的回答也非常有用（我会说比我的更好），我会使用它。

【解决方案3】：

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

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

这样，按钮具有点击事件的切换动作（包括在标签上），但标签具有工具提示事件，并且两个数据切换属性位于不同的元素上，因此不会发生冲突。

【讨论】：

不鼓励这样做，根据 Bootstrap 4 文档：“您应该只将工具提示添加到传统上可通过键盘聚焦和交互的 HTML 元素（例如链接或表单控件）。尽管任意 HTML 元素（例如因为 s) 可以通过添加 tabindex="0" 属性来获得焦点，这将为键盘用户在非交互式元素上添加可能令人讨厌和令人困惑的制表位。此外，大多数辅助技术目前不公布工具提示在这种情况下。”
@PiDa 有趣...我可以争辩说工具提示仍在按钮上（即跨度是按钮的一部分，而不是其他地方的任意跨度）但我同意你的观点（我不对辅助技术在实践中的运作方式了解不够，无法评论更精细的细节），所以我很感激你的评论。