diff --git a/src/dropdownToggle/docs/demo.html b/src/dropdownToggle/docs/demo.html
index 5c12fe9708..0be683fbd3 100644
--- a/src/dropdownToggle/docs/demo.html
+++ b/src/dropdownToggle/docs/demo.html
@@ -2,9 +2,24 @@
Click me for a dropdown, yo!
+
+
+
+
+
+ Hover over me for a dropdown, yo!
+
+
+
+
+
\ No newline at end of file
diff --git a/src/dropdownToggle/docs/readme.md b/src/dropdownToggle/docs/readme.md
index 2e42c46be6..5e7f4f47d4 100644
--- a/src/dropdownToggle/docs/readme.md
+++ b/src/dropdownToggle/docs/readme.md
@@ -1,2 +1,2 @@
-DropdownToggle is a simple directive which will toggle a dropdown link on click. Simply put it on the `` tag of the toggler-element, and it will find the nearest dropdown menu and toggle it when the `` is clicked.
+DropdownToggle is a simple directive which will toggle a dropdown link on click. Simply put it on the `` tag of the toggler-element, and it will find the nearest dropdown menu and toggle it when the `` is clicked. Alternately, you can also make a dropdown menu toggle on hover using the attribute `dropdown-hover` i.e. ``
diff --git a/src/dropdownToggle/dropdownToggle.js b/src/dropdownToggle/dropdownToggle.js
index e04ccf7b90..a07277cbe8 100644
--- a/src/dropdownToggle/dropdownToggle.js
+++ b/src/dropdownToggle/dropdownToggle.js
@@ -20,6 +20,19 @@ angular.module('ui.bootstrap.dropdownToggle', []).directive('dropdownToggle', ['
link: function(scope, element, attrs) {
scope.$watch('$location.path', function() { closeMenu(); });
element.parent().bind('click', function() { closeMenu(); });
+
+ if (attrs.dropdownHover) {
+ element.parent().bind('mouseover', function(event) {
+ event.stopPropagation();
+ element.parent().addClass('open');
+ });
+
+ element.parent().bind('mouseout', function(event) {
+ event.stopPropagation();
+ element.parent().removeClass('open');
+ });
+ }
+
element.bind('click', function (event) {
var elementWasOpen = (element === openElement);
diff --git a/src/dropdownToggle/test/dropdownToggleSpec.js b/src/dropdownToggle/test/dropdownToggleSpec.js
index ae5b154e99..0fd267efa0 100644
--- a/src/dropdownToggle/test/dropdownToggleSpec.js
+++ b/src/dropdownToggle/test/dropdownToggleSpec.js
@@ -14,7 +14,22 @@ describe('dropdownToggle', function() {
function dropdown() {
return $compile('')($rootScope);
}
-
+
+ function dropdownHover() {
+ return $compile('')($rootScope);
+ }
+
+ it('should toggle if hover is true', function() {
+ var elm = dropdownHover();
+ expect(elm.hasClass('open')).toBe(false);
+ elm.find('a').mouseover();
+ expect(elm.hasClass('open')).toBe(true);
+
+ // only close the dropdown after exiting li tag.
+ elm.find('li').mouseout();
+ expect(elm.hasClass('close')).toBe(false);
+ });
+
it('should toggle on `a` click', function() {
var elm = dropdown();
expect(elm.hasClass('open')).toBe(false);