16

I would like to use the ui.bootstrap.dropdown message box to display text information (not links) in a similar way to the ui.bootstrap.popover. I would like to modify this directive as it does 99% of what I need and I don't want to add all the additional JS that the popover requires.

In other words I would like the "dropdown list area" to display when the user hovers the mouse over the down arrow and then go away when they move the mouse away from the down arrow.

Is there a way that I could add an option to the ui.bootstrap.dropdown so hovering the mouse over the arrow would show and hide the dropdown box. I don't want to place any links in this box.

I hope someone has some ideas that could help me with suggesting how I could change this directive that comes with the ui.bootstrap.dropdown:

.directive('dropdownToggle', function () {
    return {
        require: '?^dropdown',
        link: function (scope, element, attrs, dropdownCtrl) {
            if (!dropdownCtrl) {
                return;
            }

            dropdownCtrl.toggleElement = element;

            var toggleDropdown = function (event) {
                event.preventDefault();

                if (!element.hasClass('disabled') && !attrs.disabled) {
                    scope.$apply(function () {
                        dropdownCtrl.toggle();
                    });
                }
            };

            element.bind('click', toggleDropdown);

            // WAI-ARIA
            element.attr({ 'aria-haspopup': true, 'aria-expanded': false });
            scope.$watch(dropdownCtrl.isOpen, function (isOpen) {
                element.attr('aria-expanded', !!isOpen);
            });

            scope.$on('$destroy', function () {
                element.unbind('click', toggleDropdown);
            });
        }
    };
7
  • 1
    You need the JS to active the mouseover function
    – Gericke
    Feb 6, 2015 at 11:36
  • Well I'm okay with having js but would prefer not to add the couple of hundred lines that I saw when I looked at popover and all that came with that. What I am hoping is if there is some way to modify the dropdown directive.
    – Alan2
    Feb 6, 2015 at 11:38
  • Perhaps you want to try the tooltip function of bootstrap
    – Gericke
    Feb 6, 2015 at 11:43
  • I looked at tooltip but we're looking for something that matches dropdown to keep things the same. That's why I'm really interested in any potential small modification to dropdown that could help me and anyone else looking for the same. I checked but can't find any examples on the web.
    – Alan2
    Feb 6, 2015 at 13:18
  • @Alan can you put together a JS fiddle. We can look into it. Feb 9, 2015 at 10:16

4 Answers 4

37
+250

This only requires a little extra CSS to accomplish. You didn't provide your markup in the question, so I'm just using the button group examples from the doc. If you provide your specific markup, I'll adjust this answer accordingly.

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css";


.btn-group:hover>.dropdown-menu {
  display: block;
}
<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>


</head>

<body>

  <div ng-controller="DropdownCtrl">

    <!-- Single button -->
    <div class="btn-group" dropdown is-open="status.isopen">
      <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a>
        </li>
        <li><a href="#">Another action</a>
        </li>
        <li><a href="#">Something else here</a>
        </li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a>
        </li>
      </ul>
    </div>

    <!-- Split button -->
    <div class="btn-group" dropdown>
      <button type="button" class="btn btn-danger">Action</button>
      <button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
        <span class="caret"></span>
        <span class="sr-only">Split button!</span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a>
        </li>
        <li><a href="#">Another action</a>
        </li>
        <li><a href="#">Something else here</a>
        </li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a>
        </li>
      </ul>
    </div>

  </div>
  <script>
    angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function($scope, $log) {
      $scope.items = [
        'The first choice!',
        'And another choice for you.',
        'but wait! A third!'
      ];

      $scope.status = {
        isopen: false
      };

      $scope.toggled = function(open) {
        $log.log('Dropdown is now: ', open);
      };

      $scope.toggleDropdown = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.status.isopen = !$scope.status.isopen;
      };
    });
  </script>
</body>

</html>

Really all that the dropdown does is add an open class to the parent element when it is clicked. The Bootstrap CSS contains a rule that causes the child element with the .dropdown-menu class to be have it's display property set to block:

.open>.dropdown-menu {
  display: block;
}

Therefore, to cause the menu to display when you hover, you can use the :hover pseudo class in CSS to do the same. In this example, I attached the rule to the .btn-group parent element as such:

.btn-group:hover>.dropdown-menu {
  display: block;
}
4
  • This looks like just what I need. I will try this out and if okay will accept the answer. Thanks for your help.
    – Alan2
    Feb 10, 2015 at 6:52
  • This works well on PC. However, when I open the page in iPad, hover-dropdown menu becomes regular click-dropdown (which is fine because there is no hover on iPad), but the problem is that the dropdown menus don't disappear after a menu is selected. To dismiss it, you have to touch some where else accepting input. Any workaround?
    – newman
    May 17, 2015 at 16:55
  • @miliu, the way I tend to do this is to use a function to set the collapse variable to the collapsed state and put it in the ng-click on each of the dropdown elements. You can pass it in separately if you have some other function that's already on the ng-click such as: ng-click="doSomething(); collapseMenu()". If it doesn't make sense, post a question and I'll answer or someone else will -- PS sorry for the previously deleted comment, I just was answering a similar question and got the two mixed up.
    – jme11
    May 17, 2015 at 17:53
  • Sometimes the list get closed while moving the cursor to the list.
    – CSchulz
    Aug 31, 2016 at 13:12
11

Here's my simple but lo-fi solution. Having the Mouseover and mouseleave on the top level list item was my biggest Eureka, so they act on the group:

 <li uib-dropdown is-open="status.isopen" ng-mouseover="status.isopen = true" ng-mouseleave="status.isopen = false">
                <a ui-sref="abc">ABC</a>
                <ul uib-dropdown-menu role="menu">
                    <li role="menuitem"><a ui-sref="def">DEF</a></li>
                </ul>
            </li>
1
  • 1
    This is the most simplest way to achieve!
    – pTK
    Oct 14, 2016 at 18:45
6

You can decorate directives.

With this way you don't have to touch the original code and you can keep the original behaviour.

HTML

<a href="#" class="open-dropdown-on-hover" dropdown-toggle></a>

JS

angular.module('app').config(uiDropdownToggleDecorate);

uiDropdownToggleDecorate.$inject = ['$provide'];

function uiDropdownToggleDecorate($provide) {
    // the trick here is you have to put 'Directive' after the original directive name
    $provide.decorator('dropdownToggleDirective', uiDropdownToggleDecorator);

    uiDropdownToggleDecorator.$inject = ['$delegate'];

    function uiDropdownToggleDecorator($delegate) {

        var directive = $delegate[0];
        var link = directive.link;

        directive.compile = function() {
            return function(scope, elem, attrs, ctrl) {
                link.apply(this, [scope, elem, attrs, ctrl]);

                function toggle() {
                    if (elem.hasClass('open-dropdown-on-hover')) {
                        scope.$apply(function() {
                            ctrl.toggle();
                        });
                    }
                }

                elem.hover(function() {
                    toggle();
                }, function() {
                    toggle();
                });
            };
        };

        return $delegate;
    }
}
1
  • The directive is called uibDropdownToggleDirective in newer versions. For me the menu gets closed when I try to select an item of the list.
    – CSchulz
    Aug 31, 2016 at 13:10
1

Just add a scope variable to is-open and then add attribute ng-mouseover="status.isopen = true"

<div class="btn-group" uib-dropdown ng-mouseover="status.isopen = true" is-open="status.isopen">

Alternatively, you can use ng-mouseenter="status.isopen = true" and ng-mouseleave="status.isopen = false" however this can sometimes cause the drop down to close as you move into the down down.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.