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

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

Where you see:

 /* TAB DATA-API
  * ============ */

  $(function () {
    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
      e.preventDefault()
      $(this).tab('show')
    })
  })

change the 'click.tab.data-api' to 'hover.tab.data-api'

Note: I tested this with Bootstrap v2.0.2