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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script> $(document).ready(function(){ $('.nav-tabs > li > a').hover(function() { $(this).tab('show'); }); }) </script> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#menu1">Menu1</a></li> <li><a data-toggle="tab" href="#menu2">Menu2</a></li> <li><a data-toggle="tab" href="#menu3">Menu3</a></li> </ul> <div class="tab-content"> <div id="menu1" class="tab-pane fade in active"> <strong>Menu1</strong> First tab content. </div> <div id="menu2" class="tab-pane fade"> <strong>Menu2</strong> Second tab content. </div> <div id="menu3" class="tab-pane fade"> <strong>Menu3</strong> Third tab content. </div> </div> |
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
- Show Bootstrap Dropdown Menu on Hover
- Bootstrap Tab Menus
- How to Create Vertical Tab Menus Using Bootstrap
- Show/Hide Div on Dropdown Selected Using jQuery
I hope you like this post on how to create a tab menu to open on hover.