让工具提示在禁用的标签内工作

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/