Bootstrap: Dropdown on Hover Plugin

I am no longer responding to comments on this blog; it's too much work to manage.

Please report any bugs/issues/questions on GitHub.

There is a lot of discussion about the Bootstrap dropdowns and the fact that they do not activate on hover. I've read some reasons against hover, and even some from one of the creates of Bootstrap, and they are good points.

Sometimes though, I do like a good hover. So I wrote a plugin that you can use that gives a nice hover with a close-after-delay effect. You can optionally choose to close all other navs as soon as you hover over the next, and you can also set the delay time (500ms by default).

The delay is nice, because it doesn't punish users for moving their mouse 1px outside the dropdown (which would close it without the delay). There is also a small space between the button and the dropdown, where without the delay, it would close if your mouse went over it, so the delay helps with that, too.

This won't affect your mobile users. As a matter of fact, I think it enhanced the experience I had on my iPad a little bit. Without this plugin, once I opened a nav, I couldn't close it, but once I open another nav, it at least closes the last one I opened.

Alright, enough talking... the code:

The markup must be the same as it normally is with Bootstrap's dropdowns, and then to activate, you just add data-hover="dropdown" where you'd add data-toggle="dropdown". For more options and usage, please go to GitHub

<li class="dropdown">  
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
        Account <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>  

Please report any bugs on GitHub, as it's easier to manage than bugs reported in the comments here. Also note that 99% of the issues people are having can be solved by double checking your markup!

Demo: Bootstrap: Dropdown on Hover
Fork: GitHub
Download: uncompressed | minified

Addendum

[Update: 02 August 2013] Demo updated with Bootstrap 3

[Update: 31 March 2013] I have a new way of editing posts, so I can import the actual code now for the plugin, making it easier to update, so I'll keep the code on this page.

[Update: 16 March 2013] It's tough to keep the code in this post updated automagically, so I am removing the code from the post. Please visit GitHub for the source code. The download and demo links on these pages link directly to a copy of exactly what's in GitHub, so I'll keep those here for convenience (some people are still intimidated by GitHub).

[Update: 17 Oct 2012] I added some features to the plugin and added the details on this post (as well as the new code). I also put the code on GitHub, scroll down for the link.

Cameron Spear

Cameron Spear

I'm a Web Developer that is very passionate about all (most?) things web. I like rambling on about nothing, coding, and my dogs, Bruno & Cinders. Oh, and my wife.

comments powered by Disqus