Hover上的Twitter Bootstrap工具提示&焦点

时间:2012-11-26 20:36:58

标签: javascript twitter-bootstrap tooltip

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

我可以添加data-trigger =“focus”来使工具提示显示在焦点上,但我如何同时进行悬停和聚焦?

4 个答案:

答案 0 :(得分:6)

你试过data-trigger="focus hover"

吗?

答案 1 :(得分:5)

@Adrian的

解决方案无法在Bootstrap 3上运行。使用以下内容:

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

答案 2 :(得分: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到Twitter Bootstrap使trigger成为多值属性,只需将其设置为hover focus

答案 3 :(得分:3)

您只需传递触发器参数:

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

see bootstrap tooltip article