时间戳

首页 > 解决方案 > Bootstrap 4 - 按钮上的下拉菜单和工具提示？

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

问题描述

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

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

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

标签： javascripthtmlbootstrap-4

解决方案

您可以通过任何属性、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

推荐阅读