引导工具提示不会隐藏在最新的 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

我个人不喜欢 boostrap tooltip，我已经创建了自定义脚本来用 popover 替换 tootlip，这里是如何使用它

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

  });