setup event bus to listen for touches.

On mobile browsers hover is replaced with touch to trigger the tooltip. This causes the tool tip to not close when you touch anywhere else on the document.

This adds an event bus to listen for touches on the document and then resets the visible value to null.

We change from false to null here, because we don’t want to override any of the user overrides. Eg; if you as a developer manually control the visibility of a tooltip then we won’t try to automatically open or close it.

addon/components/balloon-tooltip.js

@@ -1,21 +1,46 @@
 import Component from '@ember/component';
+import { inject } from '@ember/service';
 import layout from '../templates/components/balloon-tooltip';
 
 export default Component.extend({
   tagName: 'button',
   classNames: ['ember-balloon-tooltip__element'],
 
-  position: 'up',
-  length: false,
-  title: '',
-  visible: false,
-
   attributeBindings: [
     'title:data-balloon',
     'position:data-balloon-pos',
     'visible:data-balloon-visible',
     'length:data-balloon-length'
   ],
 
+  eventBus: inject(),
+
+  length: false,
+  position: 'up',
+  title: '',
+  visible: null,
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    this.get('eventBus').on('bodyTouched', ({ target }) => {
+      if (this.element.contains(target)) {
+        return;
+      }
+
+      if (this.get('visible')) {
+        return;
+      } else {
+        this.set('visible', null);
+      }
+    });
+  },
+
+  willDestroyElement() {
+    this.get('eventBus').off('bodyTouched');
+
+    this._super(...arguments);
+  },
+
   layout
 });

addon/services/event-bus.js

@@ -0,0 +1,15 @@
+import Evented from '@ember/object/evented';
+import Service from '@ember/service';
+
+export default Service.extend(Evented, {
+  init() {
+    this._super(...arguments);
+    this.setupListeners();
+  },
+
+  setupListeners() {
+    document.addEventListener('touchstart', (event) => {
+      this.trigger('documentTouched', event);
+    });
+  }
+});

app/services/event-bus.js

@@ -0,0 +1 @@
+export { default } from 'ember-balloon-tooltip/services/event-bus';