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

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>

有以下联合材料：

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

在没有重新启用选项卡的情况下，我试图做的是让工具提示工作，而在一个被称为disabled的nav-item中。

有什么想法吗？

这目前不起作用。

Answer 1

首先，在代码示例中，您拼写禁用了。

在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/