Bootstrap tooltips won't hide in newest Safari 8.0

Question

I have this weird case with Bootstrap tooltips (only) on newest Safari 8.0. I have a form and I must show a tooltip on each of the inputs (please, don't ask why).

Here is a jsfiddle example

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

And here is how it looks in Safari 8.0

First I thought that our css may cause some issues, so I've stripped it down to pure bootstrap classes. Then I thought maybe I should move those tooltips from inputs to divs that were wrapping inputs but that also didn't help.

At the end I've removed all wrappers and left only the inputs but that also didn't help.

My wild guess is that the new Safari doesn't recognize the mouseleave action if 2 same elements have no space between them.

Does anyone could think of any workaround for that?

Answer 1

You can fix it by adding a manual trigger (like @play2web is using for popovers) and removing any tooltips before showing a new one as follows:

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't use the delay functionality anymore.