Added ability to change event propagation mode from default "bubble" to "capture"

[aweber1]

I had a scenario where the tooltip needed to be triggered on click. However, the trigger element is contained within a parent component that needed to handle the trigger click event as well. Unfortunately, the tooltip checkStatus method stopped click propagation in order to add a handler for outside click events that will close the tooltip.

I tried using a custom event to activate the tooltip on trigger click. This almost worked as the click event was propagating but unfortunately the event was bubbling after the checkStatus outside handler was registered, so the tooltip was being hidden immediately.

The change I ultimately ended up making was to introduce a new prop to set the propagation mode to capture instead of bubble. This effectively disableds the e.stopPropagation call in checkStatus and changes the outside click handler to "capture" instead of "bubble", which allows the parent click event to be handled first and then displays the tooltip. And outside click events still close the tooltip.

I was wary that changing the default bubble behavior might have unintended consequences for other people using this component, so the default event propagation mode will always be "bubble". But by setting the "eventPropagationMode" prop to "capture", you can change the default behavior.

[megalithic]

👍

i had just forked this repo to deal with this same issue. thanks @aweber1

[wwayne]

@aweber1 Thanks, merging, will add related doc when I have time

[megalithic]

@wwayne shouldn't the docs and example be updated? at the very least the readme.md with the new prop, etc? i think this would be beneficial to others to have publicized. /cc @aweber1