How can I make a Twitter Bootstrap 'Split button dropdown' dropdown on hover rather than click?

Question

I am using a Twitter Bootstrap split button dropdown. How can I get it to dropdown when it is hovered over, rather than when the arrow is clicked?

This is similar to this previous question, but for a different Twitter Bootstrap element.

Answer 1

The solution to this is nearly the same as the question in your link. You need to add some CSS to the :hover pseudo selector that will display the dropdown. The hovered element must encompass both the button, and the dropdown list. In the example below, I added the btn-hover class to the button group to act as my hover selector.

        <div class="btn-group btn-hover">
          <button class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            Action
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="#">Test</a></li><!-- dropdown menu links -->
            <li><a href="#">Test 2</a></li><!-- dropdown menu links -->
          </ul>
        </div>

CSS:

div.btn-group:hover ul.dropdown-menu{
    display: block;    
}

div.btn-group ul.dropdown-menu{
    margin-top: 0px;    
}

Answer 2

Use this code for larger device hover effect and smaller device click effect:

$(document).ready(function(){

  $('.dropdown').append("<style type='text/css'>@media screen and (min-width: 768px) { .dropdown:hover .dropdown-menu {display: block;} }</style>"); 

});