How To Create Hover Tabs Using Bootstrap and jQuery

In this tutorial, learn how to create hover tabs using both Bootstrap and jQuery. The Bootstrap tabs work on click by default. However, you can change the behavior of tab menus by adding some jQuery.

The tab menus may contain many numbers of content within the single section. You can add as many contents with its menu item in the single and portable section. By default, if you click the tabs menu, you will get the new content. However, somewhere you may have to change this default behavior. You may also like to read how to create vertical tab menus using Bootstrap.

Well, here is a method you can use to create a hover effect for your tab menus. Each time you hover over the menu tab items, its matching content starts displaying immediately on mouse hover.

How to Create Hover Tabs with Bootstrap and jQuery

First of all, create the Bootstrap menu using the method in the post Bootstrap tab menus. After that, you have to use the jQuery hover() for the selector .nav-tabs > li > a. Inside the hover function, you have to use the tab(). Now, you have to pass show as the argument to show the content on hover.

Test it Live


Hover over the below menu items

Click the tab menus given in the above example. Each time you click, different content starts showing for the matching tab menu. There are 3 menu tabs in the above example and 3 content for each tab menu item.

Hope, you like this post of how to create a tab menu to open on hover. If you have any query regarding the tutorial, please comment below.

Also tell me, which method you are using to create your menu tab to open on hover.


Get FREE Access to Toolkit and Resources that we are using in Tutorialdeep that Every Professional Should Have! in one handy PDF.

Get the PDF

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Download Link Will be Send to Your Email id