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');
});

更新示例：

＆＃13;

$(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');
  });
});

＆＃13;

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

＆＃13;

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

禁用并启用工具提示无法正常工作

4 个答案: