禁用和启用工具提示不起作用

Question

我正在尝试使用 jquery 关闭和打开切换时的引导工具提示。但它似乎没有正常工作。我注意到，一旦关闭引导工具提示，它就不会再次打开工具提示。 如何重新启用工具提示？感谢您的帮助

 .fa-3x {
  background-color: yellow;
}
.fa-lg {
  background-color: blue;
}
.toggle-button-on {
  color: green;
}
.toggle-button-off {
  color: red;
}  

$(document).ready(function() {
  $("ul.nav li ").click(function() {
$(this).toggleClass("toggle-button-on").find(".fa-3x").removeClass("fa-3x").addClass("fa-lg").css("border", "3px solid red");
  });
  $(".nav").on("click", ".toggle-button-on", function() {
$(".toggle-button-on").toggleClass("toggle-button-on toggle-button-off");
$(".nav .fa-3x").toggleClass("fa-3x fa-lg");
$('[data-toggle="tooltip"]').tooltip();
  });
  $(".nav").on("click", ".toggle-button-off", function() {
$(".toggle-button-off").toggleClass("toggle-button-off toggle-button-on");
$(".nav .fa-lg").toggleClass("fa-lg fa-3x");
 $('[data-toggle="tooltip"]').tooltip('disable');
   // $('[rel=tooltip]').tooltip('disable') // Hide and destroy tooltips
  });
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div ng-controller="" ng-Click="">
  <ul class="nav">
<li>
  <a class="toggle-button-on"><i class="fa fa-exchange">toggle</i></a>
</li>
<li>
  <a ui-sref="Home" ng-class=""  data-toggle="tooltip" data-placement="top" data-original-title="Default tooltip">
    <i class="fa fa-home fa-3x">fa </i>
    <span>Home</span>
  </a>
</li>
<li>
  <a ng-class="">
    <i class="fa fa-bar-chart-o fa-3x"  data-toggle="tooltip" data-placement="top" data-original-title="Default tooltip">fa </i>
    <span>Work </span>
  </a>
</li>
<li>
  <a ui-sref="Music" ng-class=""  data-toggle="tooltip" data-placement="top" data-original-title="Default tooltip">
    <i class="fa fa-table fa-3x">fa </i>
    <span>Scenario <br/>Music</span>
  </a>
</li>
<li>
  <a ui-sref="faq"  data-toggle="tooltip" data-placement="top" data-original-title="Default tooltip">
    <i class="fa fa-faq fa-3x">fa </i> 
    <span>Faq</span> 
  </a>
</li>
  </ul>
</div>

Answer 1

查看toggleClass的文档

<div class="tumble">Some text.</div> 

将.toggleClass( "bounce spin" ) 应用于相同的<div> 会在<div class="tumble bounce spin"> 和<div class="tumble"> 之间交替使用

所以只使用一个$(".toggle-button-off").toggleClass("toggle-button-on"); 和$(".toggle-button-on").toggleClass("toggle-button-off");

然后就可以了。

Answer 2

您似乎正在尝试重新初始化已禁用的工具提示。这不起作用，因为工具提示已经初始化。您需要启用它：

$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="tooltip"]').tooltip('enable');

或者，而不是使用禁用工具提示：

$('[data-toggle="tooltip"]').tooltip('disable');

您可以改为destroy 工具提示，然后像您最初尝试做的那样重新初始化它：

$('[data-toggle="tooltip"]').tooltip('destroy');

$(".nav").on("click", ".toggle-button-on", function() {
  $(".toggle-button-on").toggleClass("toggle-button-on toggle-button-off");
  $(".nav .fa-3x").toggleClass("fa-3x fa-lg");
  $('[data-toggle="tooltip"]').tooltip();
});
$(".nav").on("click", ".toggle-button-off", function() {
  $(".toggle-button-off").toggleClass("toggle-button-off toggle-button-on");
  $(".nav .fa-lg").toggleClass("fa-lg fa-3x");
  $('[data-toggle="tooltip"]').tooltip('destroy');
});

更新示例：

$(document).ready(function() {
  $("ul.nav li ").click(function() {
    $(this).toggleClass("toggle-button-on").find(".fa-3x").removeClass("fa-3x").addClass("fa-lg").css("border", "3px solid red");
  });
  $(".nav").on("click", ".toggle-button-on", function() {
    $(".toggle-button-on").toggleClass("toggle-button-on toggle-button-off");
    $(".nav .fa-3x").toggleClass("fa-3x fa-lg");
    $('[data-toggle="tooltip"]').tooltip();
  });
  $(".nav").on("click", ".toggle-button-off", function() {
    $(".toggle-button-off").toggleClass("toggle-button-off toggle-button-on");
    $(".nav .fa-lg").toggleClass("fa-lg fa-3x");
    $('[data-toggle="tooltip"]').tooltip('destroy');
  });
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div ng-controller="" ng-Click="">
  <ul class="nav">
    <li>
      <a class="toggle-button-on"><i class="fa fa-exchange">toggle</i></a>
    </li>
    <li>
      <a ui-sref="Home" ng-class="" data-toggle="tooltip" data-placement="top" data-original-title="Default tooltip">
        <i class="fa fa-home fa-3x">fa </i>
        <span>Home</span>
      </a>
    </li>
    <li>
      <a ng-class="">
        <i class="fa fa-bar-chart-o fa-3x" data-toggle="tooltip" data-placement="top" data-original-title="Default tooltip">fa </i>
        <span>Work </span>
      </a>
    </li>
    <li>
      <a ui-sref="Music" ng-class="" data-toggle="tooltip" data-placement="top" data-original-title="Default tooltip">
        <i class="fa fa-table fa-3x">fa </i>
        <span>Scenario <br/>Music</span>
      </a>
    </li>
    <li>
      <a ui-sref="faq" data-toggle="tooltip" data-placement="top" data-original-title="Default tooltip">
        <i class="fa fa-faq fa-3x">fa </i> 
        <span>Faq</span> 
      </a>
    </li>
  </ul>
</div>

Answer 3

您需要在toggle-button-on事件处理程序中启用它：

$('[data-toggle="tooltip"]').tooltip('enable');

见this JSFiddle

Answer 4

在您的 toggle-button-off 事件中，您正在使用 $('[data-toggle="tooltip"]').tooltip('disable'); 禁用工具提示

然后在您的toggle-button-on 事件中，您只需使用$('[data-toggle="tooltip"]').tooltip('enable'); 启用它

enable()

否则您的代码似乎运行良好。
这是工作 JSFiddle