Получить всплывающую подсказку, работающую на отключенной вкладке - PullRequest
Новая
       20

Получить всплывающую подсказку, работающую на отключенной вкладке

0 голосов
/ 22 марта 2019

Рассмотрим следующее: 

<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.

Есть мысли?

В настоящее время это не работает.

1 Ответ

1 голос
/ 22 марта 2019

Прежде всего, в вашем примере кода вы написали отключено неправильно.

В bootstrap4, nav-item необязательно при создании вкладки. Вы можете создать вкладку, просто имея nav и nav-link s.

Всплывающая подсказка работает внутри 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>

enter image description here

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

...