This way I am showing bootstrap tooltip from my validation function.
var options = { html: true, placement: 'bottom', title: '<div class="tooltip-alert alert-danger" data-placement="bottom">' + message + '</div>' };
$(inputElement).addClass('validation-error');
inputElement.tooltip("destroy")
.addClass("error")
.tooltip(options);
inputElement.tooltip("show");
so when many tooltips is open and if i click on another button then tooltips are still open which is not good. so tell me how to hide or close all open bootstarp tooltips when user click on another button?
The span element will contain a tooltip div with a little html (image and link). Tooltip should be opened when clicked on the span element and closed when clicked outside of it or outside of the tooltip.
Single element To make an element display its tooltip permanently, we use its showTooltipOn property. To make tooltip always be shown, set it to "always" .
You can add different Bootstrap 5 tooltip directions by changing top , right , left , bottom in the data-bs-palcement . By aiming . tooltip-inner and . tooltip-arrow::before , you can change the color.
When you have 100s of tooltips open, I believe you have given .tooltip
class for everything. So, you can use this shorthand to close all the tooltips:
$(".tooltip").tooltip("hide");
Snippet
$(function () {
$('[data-toggle="tooltip"], .tooltip').tooltip();
$('[data-toggle="tooltip"], .tooltip').tooltip("show");
$("button").click(function () {
$('[data-toggle="tooltip"], .tooltip').tooltip("hide");
});
});
body {padding: 50px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
<br /><br />
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<br />
<br /><br /><br />
<button>Hide All</button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With