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

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

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?


Solution 1:

In your $(document).ready or elsewhere …

put something like this:

$('.nav-tabs > li > a').hover(function() {

You wont have to modify the core bootstrap code.

Additionally you could do this:

$('.nav-tabs > li ').hover(function() {
  if ($(this).hasClass('hoverblock'))

$('.nav-tabs > li').find('a').click(function() {

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

Solution 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 () {

Also there is a small Bootstrap plugin which automatically activates tabs on hover:

The complete HTML using this plugin is:

body { padding: 2rem; }
.tab-content { margin-top: 1.5rem; }
<link href="//" 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>

<!-- 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>

<script src="//"></script>
<script src="//"></script>
<script src="//"></script>

Solution 3:


Related:  Change Window.print() paper orientation

In your $(document).ready or elsewhere …
put something like this:

$('.nav-tabs[data-toggle="tab-hover"] > li > a').hover( function(){


<ul class="nav nav-tabs" data-toggle="tab-hover">

Solution 4:

Modify bootstrap.js (or boostrap-tab.js if you aren’t using the full bootstrap.js file)

Where you see:

  * ============ */

  $(function () {
    $('body').on('', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {

change the '' to ''

Note: I tested this with Bootstrap v2.0.2

Solution 5:

Right from my production code. Orthogonal, unobtrusive, can “unclick” any user interface. Selector can be modified to match many kinds of clickables.

$(document).on('mouseover','.js-mouseover-to-click',function (event) {

Solution 6:

i hope it is nice solution

(function ($) {
  $(function () {
    $(document).off('', '[data-hover="tab"]');
    $(document).on('', '[data-toggle="tab"], [data-hover="tab"]', function () {