feat(HXTooltip): emit open/close events

Author: Ryan A. Johnson

docs/elements/hx-tooltip/index.html

@@ -20,6 +20,16 @@
         <hx-dt>Permitted Children</hx-dt>
         <hx-dd>flow content</hx-dd>
       </hx-def>
+      <hx-def>
+        <hx-dt>Events</hx-dt>
+        <hx-dd>
+          Any of the following:
+          <ul>
+            <li><code>close</code></li>
+            <li><code>open</code></li>
+          </ul>
+        </hx-dd>
+      </hx-def>
     </hx-dl>
   </section>
 {% endblock %}

src/helix-ui/elements/HXTooltipElement.js

@@ -36,6 +36,8 @@ export class HXTooltipElement extends HXElement {
         this.$upgradeProperty('open');
         this.$defaultAttribute('role', 'tooltip');
 
+        this.setAttribute('aria-hidden', !this.open);
+
         if (this.id) {
             this._target = this.getRootNode().querySelector('[data-tooltip=' + this.id + ']');
         } else {
@@ -51,8 +53,13 @@ export class HXTooltipElement extends HXElement {
         this._destoryAllHandlers();
     }
 
-    attributeChangedCallback (attr, oldValue, newValue) {
-        this.setAttribute('aria-hidden', newValue !== '');
+    attributeChangedCallback (attr, oldVal, newVal) {
+        let isOpen = (newVal !== null);
+        this.setAttribute('aria-hidden', !isOpen);
+
+        if (newVal !== oldVal) {
+            this.$emit(isOpen ? 'open' : 'close');
+        }
     }
 
     _hide () {