Question

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')
    })
  })

Now i want the content-tab to close when you are not hovering over the tab or content.

How do i do this?

Answer 1

Update: something like the below

var timer;

$('tab_element').hover(
    function(){ //hover
        // clear timer first
        clearTimeout(timer);
        // then show the content
    },
    function(){ //unhovered, 1000 milliseconds
        // set a timer to call the hide function
        timer = setTimeout("hide_function", 1000);
    }
);

$('content_tab_here').bind('mouseleave', function(){
    // hide it, you can set a timer here too if you want
});

Here is the docs on timer http://www.w3schools.com/js/js_timing.asp
There are many options here but this will get you started, the jquery I used is old school so if you are using latest version of jquery you can change the code accordingly. I don’t want to write out everything for you because then you won’t be learning and I don’t have that much time because I am at work. Good luck.