Bootstrap 4 工具提示隱藏在按鈕單擊時不起作用？

Question

我有工具提示，這工作正常，但是一旦用戶單擊按鈕（刪除工具提示）但tooltip('hide')不起作用，我想禁用它...

如果用戶單擊添加工具提示按鈕，我還想再次添加工具提示。

我的代碼：-

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

答案將不勝感激！

Answer 1

更新：

將 jquery 中的left-menu替換為p-4

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

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

代碼筆： https://codepen.io/manaskhandelwal1/pen/QWKVMGN

Answer 2

老的

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

改變

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