A simple plugin which opens Bootstrap dropdown menus on mouse hover, the proper way.
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.
Modify the click behavior of the above two dropdowns
| 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). |
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 from github. Please report issues and suggestions to github's issue tracker or contact me on g+ or twitter!
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.
Like this plugin, have a question or just want to say hello? Feel free to leave a comment below.