5

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

enter image description here

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?

Christina
  • 32,538
  • 17
  • 76
  • 118
Dawid Woźniak
  • 198
  • 1
  • 9
  • Post this as a browser bug here: https://github.com/twbs/bootstrap/issues /From what I can see the only way is to put vertical space between the inputs, it's a very strange thing. As a work around, you can try to use left or right on the tooltip – Christina Nov 18 '14 at 18:30
  • Hey Christiana, I will definitely do that! Just wanted to find a good workaround here. Thanks! – Dawid Woźniak Nov 19 '14 at 08:56

2 Answers2

2

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.

Maarten Wolzak
  • 2,611
  • 1
  • 15
  • 17
1

I personally dont like boostrap tooltip, i have created custom script to replace tootlip with popover, here is 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);

  });
Miomir Dancevic
  • 6,071
  • 12
  • 53
  • 102