Feat: options.closeOnClickOutside to close tooltip on click outside

docs/_includes/tooltip-documentation.md

@@ -34,6 +34,7 @@ Create a new Tooltip.js instance
 | [options.template] | <code>String</code> | <code>&#x27;&lt;div class=&quot;tooltip&quot; role=&quot;tooltip&quot;&gt;&lt;div class=&quot;tooltip-arrow&quot;&gt;&lt;/div&gt;&lt;div class=&quot;tooltip-inner&quot;&gt;&lt;/div&gt;&lt;/div&gt;&#x27;</code> | Base HTML to used when creating the tooltip.      The tooltip's `title` will be injected into the `.tooltip-inner` or `.tooltip__inner`.      `.tooltip-arrow` or `.tooltip__arrow` will become the tooltip's arrow.      The outermost wrapper element should have the `.tooltip` class. |
 | options.title | <code>String</code> \| <code>HTMLElement</code> \| <code>TitleFunction</code> | <code>&#x27;&#x27;</code> | Default title value if `title` attribute isn't present. |
 | [options.trigger] | <code>String</code> | <code>&#x27;hover focus&#x27;</code> | How tooltip is triggered - click, hover, focus, manual.      You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger. |
+| options.closeOnClickOutside | <code>Boolean</code> | <code>false</code> | Close a popper on click outside of the popper and reference element. This has effect only when options.trigger is 'click'. |
 | options.boundariesElement | <code>String</code> \| <code>HTMLElement</code> |  | The element used as boundaries for the tooltip. For more information refer to Popper.js'      [boundariesElement docs](https://popper.js.org/popper-documentation.html) |
 | options.offset | <code>Number</code> \| <code>String</code> | <code>0</code> | Offset of the tooltip relative to its reference. For more information refer to Popper.js'      [offset docs](https://popper.js.org/popper-documentation.html) |
 | options.popperOptions | <code>Object</code> | <code>{}</code> | Popper options, will be passed directly to popper instance. For more information refer to Popper.js'      [options docs](https://popper.js.org/popper-documentation.html) |

packages/tooltip/src/index.js

@@ -41,6 +41,7 @@ export default class Tooltip {
    * @param {String} [options.trigger='hover focus']
    *      How tooltip is triggered - click, hover, focus, manual.
    *      You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.
+   * @param {Boolean} options.closeOnClickOutside=false - Close a popper on click outside of the popper and reference element. This has effect only when options.trigger is 'click'.
    * @param {String|HTMLElement} options.boundariesElement
    *      The element used as boundaries for the tooltip. For more information refer to Popper.js'
    *      [boundariesElement docs](https://popper.js.org/popper-documentation.html)
@@ -354,6 +355,19 @@ export default class Tooltip {
       };
       this._events.push({ event, func });
       reference.addEventListener(event, func);
+      if (event === 'click' && options.closeOnClickOutside) {
+        document.addEventListener('mousedown', e => {
+          if (!this._isOpening) {
+            return;
+          }
+          const popper = this.popperInstance.popper;
+          if (reference.contains(e.target) ||
+              popper.contains(e.target)) {
+            return;
+          }
+          func(e);
+        }, true);
+      }
     });
   }
 

packages/tooltip/tests/functional/tooltip.js

@@ -512,5 +512,18 @@ describe('[tooltip.js]', () => {
       expect(instance._popperOptions.modifiers.offset.offset).toBe(10);
       done();
     });
+
+    it('should hide on click outside with `options.closeOnClickOutside`', done => {
+      instance = new Tooltip(reference, {
+        title: 'foobar',
+        trigger: 'click',
+        closeOnClickOutside: true,
+      });
+      reference.dispatchEvent(new CustomEvent('click'));
+      then(() => expect(document.querySelector('.tooltip')).not.toBeNull());
+      then(() => document.body.dispatchEvent(new CustomEvent('mousedown')));
+      then(() => expect(document.querySelector('.tooltip').style.visibility).toBe('hidden'));
+      then(done);
+    });
   });
 });