CODEWITHSUNDEEP
javascripthtmljquerycss
Rohit Verma
Rohit Verma

Reputation: 3785

Bootstrap 4 tooltip hide is not working on button click

I have tooltip this is working fine but I want to disable it once user click on a buttons (remove tooltip) but tooltip('hide') is not working.

I also want to add again tooltip if user click on add tooltip button.

My code:

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


        $('.remove-tooltip').click(function(){
          $('.left-menu a').tooltip('hide');
   });

        $('.add-tooltip').click(function(){
          $('.left-menu a').tooltip('show');
   });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<div class="p-4 left-menu">
<a href="#" class="btn btn-primary"  data-toggle="tooltip" data-placement="right" title="Tooltip Title">
Tooltip Title</a>
<br><br>
<a href="#" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Tooltip Title">
Tooltip Title</a>

<br><br>
<button class="add-tooltip">Add Tooltip</button>
<button class="remove-tooltip">Remove Tooltip</button>
</div>

How can I solve this?

Upvotes: 0

Views: 333

Answers (2)

Manas Khandelwal
Manas Khandelwal

Reputation: 3921

Updated:

Replace left-menu in jquery to p-4

$(".remove-tooltip").click(function () {
  $('.p-4 a').tooltip('disable')
});

$(".add-tooltip").click(function () {
  $(".p-4 a").tooltip("show");
});

Codepen: https://codepen.io/manaskhandelwal1/pen/QWKVMGN

Upvotes: 1

Canopus
Canopus

Reputation: 595

Old

$('.left-menu a').tooltip('hide');

Change

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


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


        $('.remove-tooltip').click(function(){
          $('[data-toggle="tooltip"]').tooltip('disable');
   });

        $('.add-tooltip').click(function(){
          $('[data-toggle="tooltip"]').tooltip('enable');
   });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<div class="p-4 left-menu">
<a href="#" class="btn btn-primary"  data-toggle="tooltip" data-placement="right" title="Tooltip Title">
Tooltip Title</a>
<br><br>
<a href="#" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Tooltip Title">
Tooltip Title</a>

<br><br>
<button class="add-tooltip">Add Tooltip</button>
<button class="remove-tooltip">Remove Tooltip</button>
</div>

Upvotes: 1

Related Questions