Disable and enable tooltip

Question

I am trying to disable and enable the tooltip for download using jquery. but it seems to be working incorrectly. I notice that the bootstrap tooltip is off and it does not return the tooltip again. How to enable tooltip? Appreciate your help.

.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

check toggleClass documentation

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

Applying .toggleClass( "bounce spin" ) to the same <div> alternates between <div class="tumble bounce spin"> and <div class="tumble">

So use only $(".toggle-button-off").toggleClass("toggle-button-on"); and $(".toggle-button-on").toggleClass("toggle-button-off");

Then it will work.

Answer 2

It seems you are trying to reinitialize a disabled tooltip. This does not work because the tooltip has already been initialized. You need to enable it:

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

Alternatively, instead of disabling the tooltip with:

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

Instead, you can use the destroy tooltip and then reinitialize it, as you originally tried to do:

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

Updated example:

 $(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

You need to enable it in the toggle-button-on event handler:

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

See this JSFiddle

Answer 4

Inside your toggle-button-off event, you disable the tooltip using $('[data-toggle="tooltip"]').tooltip('disable');

Then inside your toggle-button-on event, you just need to enable it with $('[data-toggle="tooltip"]').tooltip('enable');

enable ()

Otherwise, your code seems to work well.
Here is a working JSFiddle