fix(tooltip): make tooltip hoverable

Author: erikkroes

packages/tooltip/src/LionTooltip.js

@@ -20,16 +20,16 @@ export class LionTooltip extends LionPopup {
     this._show = () => this._controller.show();
     this._hide = () => this._controller.hide();
 
-    this.invokerNode.addEventListener('mouseenter', this._show);
-    this.invokerNode.addEventListener('mouseleave', this._hide);
+    this.addEventListener('mouseenter', this._show);
+    this.addEventListener('mouseleave', this._hide);
     this.invokerNode.addEventListener('focusin', this._show);
     this.invokerNode.addEventListener('focusout', this._hide);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.invokerNode.removeEventListener('mouseenter', this._show);
-    this.invokerNode.removeEventListener('mouseleave', this._hide);
+    this.removeEventListener('mouseenter', this._show);
+    this.removeEventListener('mouseleave', this._hide);
     this.invokerNode.removeEventListener('focusin', this._show);
     this.invokerNode.removeEventListener('focusout', this._hide);
   }

packages/tooltip/test/lion-tooltip.test.js

@@ -21,13 +21,12 @@ describe('lion-tooltip', () => {
           <lion-button slot="invoker">Tooltip button</lion-button>
         </lion-tooltip>
       `);
-      const invoker = el.querySelector('[slot="invoker"]');
       const eventMouseEnter = new Event('mouseenter');
-      invoker.dispatchEvent(eventMouseEnter);
+      el.dispatchEvent(eventMouseEnter);
       await el.updateComplete;
       expect(el.querySelector('[slot="content"]').style.display).to.be.equal('inline-block');
       const eventMouseLeave = new Event('mouseleave');
-      invoker.dispatchEvent(eventMouseLeave);
+      el.dispatchEvent(eventMouseLeave);
       await el.updateComplete;
       expect(el.querySelector('[slot="content"]').style.display).to.be.equal('none');
     });