關於懸停和焦點的Twitter Bootstrap工具提示

Question

Twitter引導工具提示觸發器默認是懸停。

我可以添加data-trigger =“focus”以使工具提示顯示在焦點上，但我如何同時進行懸停和聚焦？

Answer 1

你有沒有嘗試過data-trigger="focus hover"

Answer 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'); });

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

更新：或者，您可以將我的補丁用於Twitter Bootstrap以使trigger成為多值屬性，並將其設置為hover focus 。

Answer 4

你可以簡單地傳遞trigger參數：

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

請參閱bootstrap工具提示文章