Bootstrap tooltip don't hide on <a> tag click

bootstrap 3 tooltip
jquery tooltip
bootstrap tooltip on click
bootstrap tooltip css
bootstrap 4 tooltip
bootstrap tooltip style
popper js
bootstrap popover dynamic content

I'm using the trigger as hover, but when I click on a link with this function the tooltip does not disappear, it will be disturbing on the screen forever

the tooltip is instantiated with this code

$('[data-toggle="tooltip"]').tooltip({
    container: 'body',
    trigger: 'hover'
});

in tags everything works perfectly, and in some cases works too, I do not know why some happen this, could someone give me a light?

Edit: I've also tried using this code to hide the tooltip with the click event

$(document).ready(function(){
     $('[data-toggle="tooltip"]').click(function () {
         $('[data-toggle="tooltip"]').tooltip("hide");
     });
});

But it doesn't work

Edit*: Picture of how it is (the text is in Portuguese)

Edit**: HTML code

<ul style="clear: both;" class="pager wizard">
    <li class="button-previous previous"><a title="Voltar" data-toggle="tooltip"><i class="fa fa-arrow-left"></i></a></li>
    <li class="voltar"><a title="Voltar" data-toggle="tooltip"><i class="fa fa-arrow-left"></i></a></li>

    <li class="finalizar"><a>Finalizar<i class="fa fa-check" style="padding-left:5px;"></i></a></li>
    <li class="next"><a class="competencia-stripe" data-toggle="tooltip" title="Continuar"><i class="fa fa-arrow-right" ></i></a></li>
</ul>

This Code Use To tag Click to Hide Hover and You Remove Click Event From below code to hover not hide.

Try This Code...! It's Worked.

$('[data-toggle="tooltip"]').tooltip({
    trigger : 'hover'
})
$('.btn-secondary').click(function(){
	$('[data-toggle="tooltip"]').tooltip('hide');
});
.tooltiphide {
  margin-top: 50px;
  margin-top: 50px;
}
<!DOCTYPE html>
<html>
<head>
	<title>Boostrap Tooltip</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
  <div class="tooltiphide">
    <a href="#" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
      Tooltip on top
    </a>
    <a href="#" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
      Tooltip on right
    </a>
    <a href="#" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
      Tooltip on bottom
    </a>
    <a href="#" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
      Tooltip on left
    </a>
  </div>
</body>
</html>

Popovers � Bootstrap, js / bootstrap.bundle.js which contains Popper.js in order for popovers to work! Popovers require the tooltip plugin as a� 1. Make sure you load jQuery.js before you load bootstrap.js. 2. Check your containers and the z-index. It seems that tooltip defaults to a z-index of 0 from within the element. It was hiding behind my main container. Forcing the tooltip into a higher z-index (I.E. z-index:1;) worked for me.

I tried to hide all tooltips as soon as the page loads and it worked

$([data-toggle="tooltip"]).on('load', function(){
         $('[data-toggle="tooltip"]').tooltip("hide");
});

but I believe it is not the best solution and I seek a better, another solution that came to me was this

window.addEventListener("click", function (event) {
    $('.tooltip.fade.top.in').tooltip("hide");
}

Bootstrap 4 Tooltip, Bootstrap 4 Tooltip. The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element: Hover over me Tooltips don’t work on Modal buttons. Description Tooltips. Tooltips in Bootstrap are a javascript feature that you can use to display an alternate text instead of using the alt attribute of a hyperlink tag (<a>). The link to my site’s homepage uses a tooltip. You can see the same thing be done on a button.

The <a> tag defines a hyperlink, which is used to link from one page to another. so it is not appropriate for one-page actions like this. but you can fix this issue by loses focus on the element by .focusout()

$(document).ready(function(){
   $('[data-toggle="tooltip"]').click(function(){
      $(this).focusout();
   });
});

Bootstrap Tooltip - examples, tutorial & advanced usage, Bootstrap tooltips are little clouds with a brief text message, triggered by clicking on a specific element or hovering over it. Overview Things to know when using the tooltip plugin: Tooltips rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js in order for tooltips to work!

This is because trigger is not set. The default value for trigger is 'hover focus', thus the tooltip stay visible after a button is clicked, until another button is clicked, because the button is focused.

So all you have to do is to define trigger as 'hover' only. Below the same example you have linked to without persisting tooltips after a button is clicked :

$('[data-toggle="tooltip"]').tooltip({
    trigger : 'hover'
})  

Bootstrap tooltip don't hide on <a> tag click, This Code Use To tag Click to Hide Hover and You Remove Click Event From below code to hover not hide. Try This Code! It's Worked. The tooltip appears above and has a blackish background and white color. Setting Direction of Bootstrap Tooltip. You can also set the direction of the tooltip to right, left, top and bottom. See the examples below to create a tooltip using bootstrap with directions. Use the attribute data-placement with the values given below. Right Direction

Bootstrap tooltip doesn't show style of the tooltip, only data, Here's a working template for you. My guesses as to what was wrong: jQuery always needs to come before bootstrap.js. If you don't have a� Bootstrap 3 Tooltip: Tooltips are the small pop up box that appear over the element as user hover the elements prompting the extra information instantly. This is another component provided in Bootstrap that uses specific JS library and often termed as bootstrap 3 tooltip plugin. Here is simple example for Bootstrap 3 tooltip with code to begin

Bootstrap Tooltip Placement, it's certainly very easy to incorporate and set up them-- why don't we see how this gets performed . Details to learn while utilizing the Bootstrap Tooltip Class:. Hey all, in this Bootstrap tutorial, I'll show you how to create a tooltip. Tooltips can be created on any element by just adding a few attributes and a little bit of JavaScript. You can find more

Bootstrap .tooltip("hide") method, Use the tooltip(“hide”) method in Bootstrap to hide the tooltip. The tooltip hides on button click as shown below −$(.btn-default).click(function(){ . Bootstrap Tooltips. In this tutorial you will learn how to create tooltips with Bootstrap. Creating the Tooltips with Bootstrap. A tooltip is a small pop up that appears when user places the mouse pointer over an element such as link or buttons to provide hint or information about the element being hovered.

Comments
  • What is the bounty for when you seem to have already found a solution for it a few months back?
  • I don't know, I wanted to