<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Nav pills --> <ul class="nav nav-pills"> <li class="active"><a href="https://www.google.com/" target="_blank" data-target="#tab-1" data-hover="tab">Tab 1</a></li> <li><a href="https://www.google.com/" target="_blank" data-target="#tab-2" data-hover="tab">Tab 2</a></li> <li><a href="https://www.google.com/" target="_blank" data-target="#tab-3" data-hover="tab">Tab 3</a></li> <li><a href="https://github.com/tonystar/bootstrap-hover-tabs" target="_blank" data-target="#tab-4" data-hover="tab">Tab 4 (external link)</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>

body { padding: 3rem 4rem; } .nav { margin-bottom: 1.5rem; }

(function ($) { $(function () { $(document).off('click.bs.tab.data-api', '[data-hover="tab"]'); $(document).on('mouseenter.bs.tab.data-api', '[data-toggle="tab"], [data-hover="tab"]', function () { $(this).tab('show'); }); }); })(jQuery);