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

It's better to bind a handler on the document object so it will work with dynamically generated tabs too:

$(document).on('mouseenter', '[data-toggle="tab"]', function () {
  $(this).tab('show');
});

Also there is a small Bootstrap plugin which automatically activates tabs on hover: https://github.com/tonystar/bootstrap-hover-tabs.

The complete HTML using this plugin is:

body { padding: 2rem; }
.tab-content { margin-top: 1.5rem; }

  
Tab 1
  
Tab 2
  
Tab 3
  
Tab 4




  
Content 1
  
Content 2
  
Content 3
  
Content 4