Bootstrap工具提示不会隐藏在最新的Safari 8.0中

Question

我在最新的Safari 8.0上使用Bootstrap工具提示（仅限）这个奇怪的情况。 我有一个表格，我必须在每个输入上显示工具提示（请不要问为什么）。

这是一个jsfiddle示例

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

以下是它在Safari 8.0中的外观

首先我认为我们的CSS可能会导致一些问题，所以我把它剥离到纯引导类。然后我想也许我应该将这些工具提示从输入移动到包含输入的div但是也没有帮助。

最后我删除了所有包装器，只留下了输入，但这也没有帮助。

我的猜测是，如果两个相同的元素之间没有空格，则新的Safari无法识别mouseleave操作。

有人能想到任何解决方法吗？

Answer 1

您可以通过添加手动触发器（例如@ play2web用于弹出式窗口）并在显示新的工具提示之前删除任何工具提示来修复它，如下所示：

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);

缺点是你不能再使用delay功能了。

Answer 2

我个人不喜欢bootstrap工具提示，我已经创建了自定义脚本来替换popover的工具提示，这里是如何使用它

<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);

  });