Bootstrap Tabs - Show/Hide on Hover

[lemecoding]

I changed the bootstrab.js (just replaced click with hover):

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

and a script like that:

$('#content_tab').bind('mouseleave', function(){
    if ($('#tab_button').hasClass('active'))
            $('#tab_button').removeClass('active');
                if ($('#content_tab').hasClass('active'))
            $('#content_tab').removeClass('active');
    return false;
});

Its working so far but there is one problem. When not hovering over the content-div or another nav-tab after hovering over the desired nav-tab , it stays open/active. Like in a horizontal menu you hover over the 1st (most left) tab and then go out to the left.
jsFiddle to illustrate: http://jsfiddle.net/WnQvF/27/

Can anyone help me to finish that menu? I am thankful for every solution!