Twitter Bootstrap Tooltips on Hover & Focus

问题

Twitter bootstrap tooltip trigger default is hover.

I can add data-trigger="focus" to cause the tooltip to display on focus, but how I do both hover and focus?

回答1:

solution by @Adrian does not work on Bootstrap 3. Use following:

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

回答2:

have you tried data-trigger="focus hover"

回答3:

you can simply pass the trigger parameter :

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

see bootstrap tooltip article

回答4:

trigger is a single-value property, so you have to fake either of both methods:

$('.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));
});

Update: Alternatively, you can use my patch to Twitter Bootstrap to make trigger a multi-value property and just set it to hover focus.

来源：https://stackoverflow.com/questions/13572737/twitter-bootstrap-tooltips-on-hover-focus