Bootstrap dropdown menu on hover plug-in: 5 demos

The dropdown menu and hover state

In the dropdown menu tutorial of Bootstrap, I showed seven demos of the menus that appeared as you click the dropdown (buttons or link). This is the default behaviour of the dropdown component that comes with Bootstrap framework. If you want to open the dropdown menu as the mouse hovers over the button or link, you may use a plug-in.

In this tutorial, I am going to show you such a plug-in that will open the dropdown menu as you bring the mouse over a button, button group or split button.

A simple demo of Bootstrap dropdown at hover state

For enabling the menu opened in the hover state, you need to include the hover plug-in’s JS file besides Bootstrap and jQuery libraries. You may download this JS file by going to the plug-in page and download the package or simply go to any demo page below, view source the demo page and locate the bootstrap-hover-dropdown.js file. Save it in your system.

See the following demo online where a menu is created with a few items. Bring over the mouse over Products and it will open the dropdown:

Bootstrap dropdown hover

See online demo and code

So, after including the libraries and plug-in file, the only difference between simple menu that opens by clicking and this one is the data-hover=”dropdown” data attribute:

 

A demo of applying this hover state in navbar menu

This time, rather than using a simple button as used in above example, I have created a top navbar with a few main and inner menu items. Among those, as you bring the mouse over the “Bootstrap” item, it will open up the dropdown at hover state. The purpose is to show the hover dropdown menu in an “actual” navbar:

Bootstrap- hover navbar

See online demo and code

You can see, the Bootstrap is showing the dropdown menu at hover state while “About” is not. This is because the data-hover=”dropdown” is only used in the “Bootstrap” markup:

 

A demo of using hover dropdown with Bootstrap standard buttons

In this demo, the button dropdowns are created by using Bootstrap standard classes. In addition, the data-hover=”dropdown” data attribute is also added in each button so it opens up at mouse hover state. See the demo and code online:

Bootstrap- hover buttons

See online demo and code

A demo with button group

You may use this plugin with button groups as well. The process remains the same, simply add the data-hover=”dropdown” to the dropdown button in a group of buttons. See the following demo:

Bootstrap- hover button group

See online demo and code

The following markup is used for creating button group hover dropdown:

 

A demo of using in Bootstrap tabs

And of course, you may use this hover state in tabs of Bootstrap that contains dropdown buttons. Again, simply add the data-hover=”dropdown” attribute in the button tag where you intend to open the menu at hover state. See this demonstration:

Bootstrap hover tabs

See online demo and code

A split button is created in the tabs where the split part is given the data-hover=”dropdown” attribute. As you bring the mouse over split part of the button, it will open the menu at hover state. If you want to open for both buttons, just add this attribute in the other button as well.