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);
});
}
};