让工具提示在禁用的选项卡中工作

Question

考虑以下因素：

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active diabled" data-toggle="tab" href="#home">Home</a>
    <i class="fas fa-circle missing-data" data-toggle="tooltip" data-placement="top" title="Missing Data"></i>
  </li>
  <li class="nav-item">
    <a class="nav-link diabled" data-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link diabled" data-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>

与以下 JS:

$(document).ready(function() {
  $('body').tooltip({
    selector: '[data-toggle="tooltip"]',
    html: true,
  });
});

我想做的是 在不重新启用选项卡的情况下 是让工具提示起作用，而在 nav-item 里面 disabled。

有什么想法吗？

这目前不起作用。

Answer 1

首先，在您的代码示例中，您拼错了 disabled。

在bootstrap4中，nav-item在构建标签时是可选的。您可以通过 nav 和 nav-link 来构建选项卡。

工具提示在 nav-item 以及禁用的 nav-link:

中有效

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active disabled" data-toggle="tab" href="#home">Home
            <i class="fas fa-circle missing-data" data-toggle="tooltip" data-placement="top" title="Missing Data"></i>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" data-toggle="tab" href="#menu1">Menu 1
            <i class="fas fa-circle missing-data" data-toggle="tooltip" data-placement="top" title="Missing Data"></i></a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" data-toggle="tab" href="#menu2">Menu 2
            <i class="fas fa-circle missing-data" data-toggle="tooltip" data-placement="top" title="Missing Data"></i></a>
    </li>
</ul>

https://jsfiddle.net/davidliang2008/fjw5c67d/8/

让工具提示在禁用的选项卡中工作

Get Tooltip working inside a disabled tab

jquery

tooltip

bootstrap-4