How To Create Hover Tabs Using Bootstrap and jQuery

Last Updated on July 16, 2021 by Roshan Parihar

In this tutorial, learn how to create hover tabs using both Bootstrap and jQuery. The short answer is to use the hover() and place tab('show')inside that function as given here below.

The tab menus may contain multiple tabs with content within the single tab section. Bootstrap tabs work on click by default, if you click the tabs menu, you will get the tab content.

You can change the behavior of tab menus by adding some jQuery. After using the below method, the tab content starts displaying immediately on mouse hover.

Bonus: download a Free Bootstrap CHEAT SHEET that will show you 20+ most important examples to learn in Bootstrap.

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

Output

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.

DOWNLOAD Free Bootstrap CHEAT SHEET

You May Also Like to Read

I hope you like this post on how to create a tab menu to open on hover.