5

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

这是一个jsfiddle示例

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

这是它在 Safari 8.0 中的外观

在此处输入图像描述

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

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

我的疯狂猜测是，如果 2 个相同的元素之间没有空格，新的 Safari 将无法识别 mouseleave 动作。

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

4

2 回答 2

2

您可以通过添加手动触发器（例如 @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功能。

于 2015-01-12T16:13:08.393 回答
1

我个人不喜欢 boostrap 工具提示，我创建了自定义脚本来用 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);

  });
于 2014-11-18T12:51:22.843 回答