How to show Bootstrap 4 Tooltip on click using jQuery

The Tooltip in Bootstrap 4 is a small pop-up box that displays content when the user hovers over an element. If we want to display the tooltip only when the user clicks on the element, use the following code.

The above example, the tooltip will be shown only when the user clicks on the element and will hide when the user clicks elsewhere on the page.

<div class='container mt-3'>
    
  <p><a href="#" data-toggle="tooltip" title="Sample Title 1">Click Me</a></p>
  
  <p><a href="#" data-toggle="tooltip" title="Sample Title 2">Click Me</a><p>
  
  <p><a href="#" data-toggle="tooltip" title="Sample Title 3">Click Me</a><p>

</div>
<script>
  $(document).ready(function(){
    
    $("[data-toggle='tooltip']").tooltip({trigger: 'click'});
      
    $("[data-toggle='tooltip']").click(function(e){
    
      e.preventDefault();
    
      $(this).tooltip({
        animation: true,
        delay:{"show":100},
        placement:'bottom',
        trigger: 'click',
      });
    });
  });
</script>

Try it Yourself

The code $("[data-toggle='tooltip']").tooltip({trigger: 'click'}); is using jQuery to select all elements on the page with the data-toggle attribute set to tooltip and then initializing a Tooltip component on those elements using the tooltip() method.

In this case, the trigger option is set to click, which means that the tooltip will be shown only when the user clicks on the element and will hide when the user clicks elsewhere on the page.