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="petencia-stripe" data-toggle="tooltip" title="Continuar"><i class="fa fa-arrow-right" ></i></a></li>
</ul>
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="petencia-stripe" data-toggle="tooltip" title="Continuar"><i class="fa fa-arrow-right" ></i></a></li>
</ul>
- What is the bounty for when you seem to have already found a solution for it a few months back? – AndrewL64 Commented Nov 29, 2019 at 18:11
- 2 I don't know, I wanted to – Lucas Commented Nov 29, 2019 at 18:27
5 Answers
Reset to default 9 +100This 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./bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery./jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn./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>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/vdzvvg6o/
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");
}
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();
});
});
As I answered here, you can hide all Bootstrap's tooltips by removing the created HTML elements.