Bootstrap tabs on hover with clickable links

Question

I am using bootstrap tabs functionality and I would like to implement the following features:

Use mouseenter instead of click to toggle between tabs
To prevent clicking action on links.

Here is my jsfiddle sample code. https://jsfiddle.net/irider89/bmLpwtqb/3/

$('.nav li a').hover(function (e) {
    e.preventDefault()
    $(this).tab('show');
});

$('.nav li a').click(function (e) {
    return true;
});

How this could be achieved?

I need to be able click on mainmenu items (Home, Profile, Messages, Settings) and go to the specific url.

Your JSFiddle seems to work in a proper way, what do you want to achieve? — SzybkiSasza, Jun 10 '15 at 10:25
I need to be able click on mainmenu items (Home, Profile, Messages, Settings) and go to the specific url. — robuh, Jun 10 '15 at 10:28

tonystar · Answer 1 · 2015-06-24T21:23:36.980

4

Don't use window.location.href = ... method! Middle mouse click will not work.

1) Toggle on hover. Bind a simple mouseenter handler on the document object:

$(document).on('mouseenter', '[data-toggle="tab"]', function () {
  $(this).tab('show');
});

2) Prevent clicking. It's better to use .off('click', ...) method to reset Bootstrap built-in handler instead of writing custom click handler dealing with custom data attribute. Like so:

$(document).off('click.bs.tab.data-api', '[data-toggle="tab"]');

Then use native href to specify external link and data-target to point to the content pane.

Also there is a small Bootstrap plugin which does all of that automatically: https://github.com/tonystar/bootstrap-hover-tabs.

Demo

edited Jun 24 '15 at 21:23

answered Jun 22 '15 at 16:52

tonystar

1,274
9
19

1

hey in the plugin "mouseenter.bs.tab.data-api" is used, what does the appendage mean? if i wanted to add also focus, would be "focus.bs.tab.data-api" correct? – Alexander Belokon Mar 28 '17 at 12:00
1

Correct! This is event namespacing (https://learn.jquery.com/events/event-basics/#namespacing-events). Also you can combine both with space. – tonystar Mar 29 '17 at 12:37

score 1 · Answer 2 · answered Jun 10 '15 at 11:55

Use some new "data-" attribute to mention the url, like this below

<a href="#home" aria-controls="home" role="tab" data-toggle="tab" data-href="www.google.com">Home</a>

and use the script like this

 $('.nav li a').on("click",function (e) {
          window.location.href = $(this).attr("data-href");
    });

score 0 · Answer 3 · answered Jun 10 '15 at 10:39

0

Use this to go the url:

$('.nav li a').click(function (e) {
   window.location.href = $(this).attr("href");
});

answered Jun 10 '15 at 10:39

Nikhil Batra

3,118
14
19

Thank you, but in in this case, if in nav links I will add a link instead of id, mouseenter functionality doesn't work. – robuh Jun 10 '15 at 10:43
Sorry for my bad english. I want to say that I still need to be able to use tabs functionality on hover and to be able to click on navs links too. – robuh Jun 10 '15 at 10:51
So you want to toggle tabs using "mousenter" as well as "clicking" ? – Nikhil Batra Jun 10 '15 at 10:54
I want to toggle them by «mouseenter» and when I click on them — they behave like normal links (with custom href link). – robuh Jun 10 '15 at 10:59
So you can add "Active" class on mousenter and use click functionality as stated above, if I am understanding correctly. – Nikhil Batra Jun 10 '15 at 11:03

score 0 · Answer 4 · answered Sep 13 '18 at 07:12

You can simply use this code to implement that feature no 1, changing tabs on hover

$('.nav-tabs li').hover(function(){
    $('.nav-tabs li a').removeClass('active show');
    $(this).children('a').addClass('active show');
    var href = $(this).children('a').attr('href');
    href = href.substr(1);
    $('.tab-pane').removeClass('active show');
    $('#'+href).addClass('active show');
});

for next feature add this code to disable click

$('.nav-tabs li').click( function(e){
    e.prevenetDefault(); 
}

score 0 · Answer 5 · answered Jun 23 '21 at 19:12

Try this:

//first, we need to show tab-content on mouseover
$(".nav-link").mouseover( function() {
    $(this).tab("show");
});

// on hovering quickly, need to remove the active class from the related tab panel
$(".nav-link").on("show.bs.tab", function(e) {
    const tabPanelId = e.relatedTarget.getAttribute("href");
    $(tabPanelId).removeClass("active");
});

score 0 · Answer 6 · answered Apr 10 '23 at 15:50

The above answers did not work completely. The TonyStar demo quickly breaks when the user hovers semi quickly between tabs. The code has been updated to add a delay to avoid that issue. Add a data-url="" attribute any tab you'd like to link to to website when clicked.

<script>
  (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() {
        var $this = $(this);
        if (!$this.hasClass('active') && !$this.hasClass('disabled')) {
          var delay = setTimeout(function() {
            $this.tab('show');
          }, 150);
          $this.data('tab-delay', delay);
        }
      }).on('mouseleave.bs.tab.data-api', '[data-toggle="tab"], [data-hover="tab"]', function() {
        var $this = $(this);
        clearTimeout($this.data('tab-delay'));
      }).on('click', '[data-hover="tab"]', function() {
        var $this = $(this);
        var url = $this.data('url');
        if (url) {
          window.location.href = url;
        }
      });
    });
  })(jQuery);
</script>

Bootstrap tabs on hover with clickable links

6 Answers6

Demo