Bootstrap tooltips won't hide in latest Safari 8.0

Question

I have this strange case with Bootstrap hints (only) on the latest Safari 8.0. I have a form and I have to show a tooltip on each of the inputs (please do not ask why).

Here is a jsfiddle example

`http://jsfiddle.net/d61yuy8q/11/` 

And this is how it looks in Safari 8.0

At first I thought that our css might cause some problems, so I split it into pure bootstrap classes. Then I thought that maybe I need to move these hints from the inputs to the div, which were wraps, but that also didn't help.

In the end, I removed all the wrappers and left only the inputs, but that also did not help.

My wild guess is that the new Safari will not recognize the mouseleave action if two identical elements have no space between them.

Can anyone think of a workaround for this?

Answer 1

You can fix this by adding a manual trigger (e.g. @ play2web uses for popovers) and removing any tooltips before showing a new one:

 var showTooltip = function() { $('.tooltip').remove(); // This line removes any currently showing tootltips $(this).tooltip('show'); }; var hideTooltip = function() { $(this).tooltip('hide'); }; $("[data-rel='tooltip']").tooltip({ trigger: 'manual' }).focus(showTooltip).hover(showTooltip, hideTooltip); 

The downside is that you can no longer use the delay functions.

Answer 2

I personally don't like the tooltip, I created a custom script to replace tootlip with popover, here's how to use it

 <a href="#" title="This is link">Hello</a> $(function() { $('[title]').attr("data-rel", "tooltip"); $("[data-rel='tooltip']") .attr("data-placement", "top") .attr("data-content", function() { return $(this).attr("title") }) .removeAttr('title'); var showPopover = function() { $(this).popover('show'); }; var hidePopover = function() { $(this).popover('hide'); }; $("[data-rel='tooltip']").popover({ trigger: 'manual' }).click(showPopover).hover(showPopover, hidePopover); });