How to make with twitter bootstrap tabs on hover instead of clicking?

Question

I finally got Bootstrap tabs to work. I was wondering if there\'s a way to change the behaviour so instead of clicking just hovering the cursor would show the hidden content?

Answer 1

In your $(document).ready or elsewhere ...

put something like this:

$('.nav-tabs > li > a').hover(function() {
  $(this).tab('show');
});

You wont have to modify the core bootstrap code.

Additionally you could do this:

$('.nav-tabs > li ').hover(function() {
  if ($(this).hasClass('hoverblock'))
    return;
  else
    $(this).find('a').tab('show');
});

$('.nav-tabs > li').find('a').click(function() {
  $(this).parent()
    .siblings().addClass('hoverblock');
});

Which will prevent hover selection after the first time a user clicks a tab.