Bootstrap tooltips to stay open on hover
Question
I have bootstrap tooltips set up on my webpage. When you roll over an image the tooltips show up, inside the tooltips I have a link, when I roll over the actually tooltip to click the link... it fades away.
My question (which I oddly could not seem to find an answer anywhere for) is how can I get tooltips to stay open when I hover over the actually tooltip itself.
I've seen and tried some solutions where you can set a delay, but I'd rather not go in that direction as I didn't like that effect.
Any help would be great, thanks!
6 answers
solution1
8 2016-03-17 09:41:04
var originalLeave = $.fn.tooltip.Constructor.prototype.leave;
$.fn.tooltip.Constructor.prototype.leave = function(obj){
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
var container, timeout;
originalLeave.call(this, obj);
if(obj.currentTarget) {
container = $(obj.currentTarget).siblings('.tooltip')
timeout = self.timeout;
container.one('mouseenter', function(){
//We entered the actual popover – call off the dogs
clearTimeout(timeout);
//Let's monitor popover content instead
container.one('mouseleave', function(){
$.fn.tooltip.Constructor.prototype.leave.call(self, self);
});
})
}
};
$('body').tooltip({ selector: '[data-toggle]', trigger: 'click hover', placement: 'bottom auto', delay: {show: 50, hide: 400}});
solution2
2 2018-02-01 18:12:06
I did it this way.
I'm triggering the tooltip on a link - so the a would have to be replaced to the relevant element:
Initialize the tooltip:
$(document).ready(function() {
$('a').tooltip();
})
Keep Tooltip open on mouseover + add a helper class on first mouseover (the tooltip alway triggered two mouseover events in my case - so I had to be sure only to add .active in the first go)
$(document).on('mouseover','.tooltip', function() {
var tooltipTrigger = $('a[aria-describedby="' + $(this).attr('id') + '"');
if(! $(tooltipTrigger).hasClass('active')) {
$(tooltipTrigger).tooltip('show').addClass('active');
}
});
Hide the corresponding tooltip when mouseout happens... this uses tooltip-inner to trigger, because the little arrow of the tooltip, which still belongs to .tooltip, can lead to a case, where you might go out of the tooltip with the cursor, but not far enough, and then the tooltips remains open...
$(document).on('mouseout','.tooltip-inner', function() {
$('a.active').tooltip('hide').removeClass('active');
});
solution3
1 2018-10-23 08:35:35
Thу way i did
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip({
trigger: "manual"
});
$('body').on('mouseleave', '.tooltip', function () {
$('[data-toggle="tooltip"]').tooltip('hide');
});
$('[data-toggle="tooltip"] > i').on('mouseenter', function () {
$('[data-toggle="tooltip"]').tooltip('show');
});
$('[data-toggle="tooltip"]').on('click', function () {
$(this).tooltip('show');
}); });
solution4
1 2020-06-16 13:29:33
$(document).ready(function(){ $(document).on("mouseover", "#myLink", (event) => { $(event.target).tooltip( { trigger: 'manual', delay: { "hide": 500 } }).tooltip("show"); }); var isOver = false; $(document).on("mouseleave", "#myLink", (event) => { setTimeout(function () { }, 1000); if (!isOver) setTimeout(function () { $('#myLink').tooltip('hide'); }, 500); }); $(document).on("mouseover", ".tooltip", (event) => { isOver = true; }); $(document).on("mouseleave", ".tooltip", (event) => { setTimeout(function () { $('#myLink').tooltip('hide'); }, 500); }); });
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </head> <body> <a href="#" id="myLink" data-toggle="tooltip" title="Stay over me!">Hover over me</a> </body> </html>
solution5
1 2020-12-09 20:56:12
This worked for me:
$('[data-toggle="tooltip"]').tooltip({
trigger: "manual"
});
$('[data-toggle="tooltip"]').on('mouseleave', function () {
$(this).tooltip('hide');
});
$('[data-toggle="tooltip"]').on('mouseenter', function () {
$(this).tooltip('show');
});
$('[data-toggle="tooltip"]').on('click', function () {
$(this).tooltip('hide');
});
solution6
0 2017-09-11 07:15:50
Try this. This could help.
tooltip-trigger="focus manual"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.