关于悬停和聚焦的 Twitter 引导工具提示答案

【问题标题】：Twitter Bootstrap Tooltips on Hover & Focus关于悬停和聚焦的 Twitter 引导工具提示
【发布时间】：2012-11-26 20:36:58
【问题描述】：

Twitter 引导工具提示触发器默认为悬停。

我可以添加 data-trigger="focus" 以使工具提示显示在焦点上，但我如何同时进行悬停和焦点？

【问题讨论】：

标签： javascript twitter-bootstrap tooltip

【解决方案1】：

你试过data-trigger="focus hover"

【讨论】：

我试过 data-trigger="focus hover" 和 data-trigger="hover focus"。两者都仅在焦点上触发，而不是悬停。
通过快速查看源代码或文档，您可以验证这是不可能的。
Bootstrap 3 的文档对数据触发器这么说：You may pass multiple triggers; separate them with a space. 因此它应该可以工作。
它应该工作（至少现在），但我得到了奇怪的结果。如果您在初始化工具提示时集中注意力，则不会发生任何事情。如果您集中注意力然后进出鼠标，工具提示就会消失（我希望它会保留，因为您仍然专注）。
对我来说，使用正确的 html 标签很重要。我改为使用带有“数据触发器”和“焦点悬停”的

【解决方案2】：

@Adrian 的解决方案不适用于 Bootstrap 3。请使用以下内容：

$('[rel=tooltip]').tooltip();
$(document).on('hover', '[rel=tooltip]', function () { $(this).tooltip('show'); });
$(document).on('focus', '[rel=tooltip]', function () { $(this).tooltip('show'); });

【讨论】：

【解决方案3】：

trigger 是一个单值属性，所以你必须伪造这两种方法中的任何一种：

$('.tooltip').tooltip({trigger: 'hover'}).each(function () {
  var $this = $(this), data = $this.data('tooltip');
  $this.on('focus.tooltip', $.proxy(data.enter, data))
    .on('blur.tooltip', $.proxy(data.leave, data));
});

更新：或者，您可以使用我的patch to Twitter Bootstrap 将trigger 设置为多值属性并将其设置为hover focus。

【讨论】：

我尝试使用该补丁，但仍然得到一个/或多个触发器。我在上面使用了你的“假”，当我没有指定数据触发器时它可以工作。我会继续尝试补丁。感谢您的帮助。
您可以将您尝试的代码发布到 jsfiddle 吗？无论如何，我们应该将此讨论移至pull request。

【解决方案4】：

您可以简单地传递 trigger 参数：

$('[data-toggle="tooltip"]').tooltip({ trigger:'hover focus' });

see bootstrap tooltip article

【讨论】：