-
Notifications
You must be signed in to change notification settings - Fork 6.6k
hide tooltips and popovers when a user clicks away #4419
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
outsideClick will open a tooltip/popover on click and close that tooltip/popover when a click happens that is not targeting a tooltip/popover trigger element or a tooltip/popover itself
- Loading branch information
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -23,6 +23,7 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s | |
| var triggerMap = { | ||
| 'mouseenter': 'mouseleave', | ||
| 'click': 'click', | ||
| 'outsideClick': 'outsideClick', | ||
| 'focus': 'blur', | ||
| 'none': '' | ||
| }; | ||
|
|
@@ -422,13 +423,37 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s | |
| } | ||
| } | ||
|
|
||
| // hide tooltips/popovers for outsideClick trigger | ||
| function bodyHideTooltipBind(e) { | ||
| if (ttScope == null || !ttScope.isOpen || tooltip == null) { | ||
| return; | ||
| } | ||
| // make sure the tooltip/popover link or tool tooltip/popover itself were not clicked | ||
| if (!element[0].contains(e.target) && !tooltip[0].contains(e.target)) { | ||
| hideTooltipBind(); | ||
| } | ||
| } | ||
|
|
||
| var unregisterTriggers = function() { | ||
| triggers.show.forEach(function(trigger) { | ||
| element.unbind(trigger, showTooltipBind); | ||
| if (trigger === 'outsideClick') { | ||
| element[0].removeEventListener('click', toggleTooltipBind); | ||
| } | ||
| else | ||
| { | ||
| element[0].removeEventListener(trigger, showTooltipBind); | ||
| element[0].removeEventListener(trigger, toggleTooltipBind); | ||
| } | ||
| }); | ||
| triggers.hide.forEach(function(trigger) { | ||
| trigger.split(' ').forEach(function(hideTrigger) { | ||
| element[0].removeEventListener(hideTrigger, hideTooltipBind); | ||
| if (trigger === 'outsideClick') { | ||
| $document[0].body.removeEventListener('click', bodyHideTooltipBind); | ||
| } | ||
| else | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This could also be rewritten with out the else.
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Please elaborate. I don't understand how this could be rewritten without the else. |
||
| { | ||
| element[0].removeEventListener(hideTrigger, hideTooltipBind); | ||
| } | ||
| }); | ||
| }); | ||
| }; | ||
|
|
@@ -442,7 +467,11 @@ angular.module('ui.bootstrap.tooltip', ['ui.bootstrap.position', 'ui.bootstrap.s | |
| if (triggers.show !== 'none') { | ||
| triggers.show.forEach(function(trigger, idx) { | ||
| // Using raw addEventListener due to jqLite/jQuery bug - #4060 | ||
| if (trigger === triggers.hide[idx]) { | ||
| if (trigger === 'outsideClick') { | ||
| element[0].addEventListener('click', toggleTooltipBind); | ||
| $document[0].body.addEventListener('click', bodyHideTooltipBind); | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Shouldn't this be added on $document instead of body? Also, don't we need to close the tooltip on contextmenu event?
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I add the event listener on body because click events bubble up, and the topmost element that's clickable (or that we care about) is the body.
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think it's better to have the listener on $document, for consistency with the rest of the library. |
||
| } | ||
| else if (trigger === triggers.hide[idx]) { | ||
| element[0].addEventListener(trigger, toggleTooltipBind); | ||
| } else if (trigger) { | ||
| element[0].addEventListener(trigger, showTooltipBind); | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These could be rewritten with out the else
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you elaborate? I don't understand how this could be rewritten without the else.
element[0].removeEventListener(trigger, showTooltipBind);andelement[0].removeEventListener(trigger, toggleTooltipBind);should not be called if the trigger is'clickaway'