Bootstrap Dropdown Hover

Github project page Download

A simple plugin which opens Bootstrap dropdown menus on mouse hover, the proper way.

Why I made it, when there are many solutions already?

I had issues with all the previously existing solutions. The simple CSS ones are not using the .open class on the parent element, so there will be no feedback on the dropdown toggle element when the dropdown menu is visible.

The js ones are interfering with clicking on .dropdown-toggle, so the dropdown menu shows up on hover, then it is hiding when clicking on the .dropdown-toggle element, and moving out the mouse will trigger the dropdown menu to show up again. Some of the js solutions are braking iOS compatibility, some plugins are not working on modern desktop browsers which are supporting the touch events.

That's why I made this proper plugin, which prevents all these issues by using only the standard Bootstrap javascript API, without any hack.

Examples

Modify the click behavior of the above two dropdowns

The plugin instance is destroyed, please reinitialize!

Other dropdown type examples

Settings

Option Default Description
clickBehavior 'sticky' clickBehavior, 'sticky'|'default'|'disable', defaults to sticky, which means that if we click on an opened dropdown then it will not hide on mouseleave but on a second click only. Can be default, which means that means that the dropdown toggles on hover and on click too, or disable, which disables dropdown toggling with clicking when mouse is detected (so it will open on hover only)
hideTimeout 200 how much time the hovered dropdown hides after mouseleave (in milliseconds).

Methods

You can modify the behavior of the plugin by calling its methods, all of which accept a value.

To call methods on any dropdown hover instance, use the following syntax:
javascript $(selector).bootstrapDropdownHover(methodName, parameter);

Method Description
setClickBehavior(value) Changes the clickBehavior parameter.
setHideTimeout(value) Changes the hideTimeout parameter.
destroy() Restores the original behavior.

Download

Download from github. Please report issues and suggestions to github's issue tracker or contact me on g+ or twitter!

Follow us to get notified about the upcoming tools!

Follow us on LinkedIn to get notified about the upcoming tools, and feel free to share your thoughts with us! We welcome any jQuery/Bootstrap plugin suggestions which can help you and the others.

Comments

Like this plugin, have a question or just want to say hello? Feel free to leave a comment below.