Bootstrap Snippet Make the twitter bootstrap tabs on hover instead of clicking using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
body {
  padding: 3rem 4rem;
}
.nav {
  margin-bottom: 1.5rem;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
(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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX