bootstrap-dropdown.js add onMouseOver option

[wuhaa11]

Hi,

I would to request a feature where the drop-down menu can be switched from onClick to onMouseOver event for the drop-down.

Thanks,

[t1mmen]

+1

[andrebq]

From the sources (bootstrap-dropdown.js)

$(function () {
$('html').on('click.dropdown.data-api', clearMenus)
$('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
})

Adding onMouseOver will require that every time the user move the mouse the browser need to check if the given element match the toggle selector, unless the onMouseOver behaves different from click (ie don't work with the data api).

[panosru]

@andrebq is quite valid on what he say but I still believe there should be an option for :hover functionality since lot's of people ask for it, click could be set by default but mouse-over should be an option too...

[wuhaa11]

Thanks, for that andrebq. I was looking for this in the 1.* version but its in the new 2.* tree.

Anyhow like panosru mentioned, you don't wana be modifying the core. There should be an enable/disable call for this in js. It just makes upgrading painless from version to version.

[andrebq]

There should be an enable/disable call for this in js.
It just makes upgrading painless from version to version.

You already can do that, using some javascript.
I can't post an example right now but this shouldn't be very complicated.

Another idea is:

$(the parent selector of the button).on('your event here.dropdown.data-api', clearMenus)
$(the parent selector of the button).on('your event here.dropdown.data-api', toggle, Dropdown.prototype.toggle)

To enable it only for a small part of the Dom.

[wuhaa11]

@andrebq I see what you mean. Your suggesting to overlap the default behaviour of the even trigger which is set by bootstrap. Make seance

Although this is not directly related to this issue, is it possible to have the dropdown open until the user clicks on the dropdown link again to cause it to close.

Reason for asking this is that I wanted to add a form for users to login when they click login but the dropdown hides the minute the user clicks on the input field. And I know I can use a model for this but i prefer to use the drop down if possible.

[fat]

For usability reasons we haven't done this. However, if you disagree the best place to implement this would be in the CSS (with hover) not in the js. It's actually quite easy, maybe you could get someone on the mailing list to help :)

[panosru]

@fat I'm not arguing that is not easy :) I just say that you could add it in the docs or something anyway to give that ability to users that want to have the dropdown on :hover :)

[wuhaa11]

@fat can you provide a link to the mailing list

[fat]

http://groups.google.com/group/twitter-bootstrap

[fat]

The reason we haven't done that is because @markdotto and I don't like the user experience and don't want to encourage it. You're on your own ;)

[panosru]

I won't even bother to comment this statement I don't like the user experience and don't want to encourage it but on desktops it could be on hover and on mobile it could be on click, make more sense from responsive perspective.

Anyways, we are on our own as you said :)

[zemyatin]

The least invasive way is via CSS like so:

.dropdown:hover .dropdown-menu {
display: block;
}

[gordonbanderson]

This works, but you still cannot click the top item

...
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
...

[codingartist]

// First: Add id to dropdown anchor element: <a id="dropdown" ....
// Second: Add id to dropdown-menu ul element: <ul id="dropdown-menu" ...
// (be sure to leave the classes as is (for this example the classes and Ids will share same names)

// Third: add the following function:

function resetHover() {
$("#dropdown").bind("hover",function() {
$(this).unbind("hover")
$("#dropdown-menu").bind("mouseleave",function() {
$(this).unbind()
$("#dropdown").trigger("click")
})
setTimeout("resetHover();",2000)
$("#dropdown").trigger("click")
})

// last call the function on page load

$(document).ready(function() {
resetHover()
})