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.

Answer 2

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

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>    <!-- Nav pills -->  <ul class="nav nav-pills">    <li class="active"><a href="#tab-1" data-toggle="tab">Tab 1</a></li>    <li><a href="#tab-2" data-toggle="tab">Tab 2</a></li>    <li><a href="#tab-3" data-toggle="tab">Tab 3</a></li>    <li><a href="#tab-4" data-toggle="tab">Tab 4</a></li>  </ul>    <!-- Tab panes -->  <div class="tab-content well">    <div class="tab-pane active" id="tab-1">Content 1</div>    <div class="tab-pane" id="tab-2">Content 2</div>    <div class="tab-pane" id="tab-3">Content 3</div>    <div class="tab-pane" id="tab-4">Content 4</div>  </div>    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>  <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>  <script src="//cdn.rawgit.com/tonystar/bootstrap-hover-tabs/v3.1.1/bootstrap-hover-tabs.js"></script>