CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-4tooltip
Lucas
Lucas

Reputation: 301

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

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)

enter image description here

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>

Upvotes: 1

Views: 8560

Answers (5)

Douglas Vicentini
Douglas Vicentini

Reputation: 323

As I answered here, you can hide all Bootstrap's tooltips by removing the created HTML elements.

Upvotes: 0

JD Savaj
JD Savaj

Reputation: 813

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>

Upvotes: 9

PHP Geek
PHP Geek

Reputation: 4033

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'
})

the doc example in a fiddle -> http://jsfiddle.net/vdzvvg6o/

Upvotes: 2

mahradbt
mahradbt

Reputation: 400

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

Upvotes: 0

Lucas
Lucas

Reputation: 301

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");
}

Upvotes: 0

Related Questions