chore(tooltip): cleanup arrow

packages/overlays/src/OverlayController.js

@@ -46,7 +46,7 @@ export class OverlayController {
           preventOverflow: {
             enabled: true,
             boundariesElement: 'viewport',
-            padding: 16, // viewport-margin for shifting/sliding
+            padding: 8, // viewport-margin for shifting/sliding
           },
           flip: {
             boundariesElement: 'viewport',

packages/tooltip/src/LionTooltip.js

@@ -1,12 +1,11 @@
 import { html, LitElement } from '@lion/core';
 import { OverlayMixin } from '@lion/overlays';
-import '../lion-tooltip-arrow.js';
 
 export class LionTooltip extends OverlayMixin(LitElement) {
   constructor() {
     super();
-    this.__mouseActive = false;
-    this.__keyActive = false;
+    this._mouseActive = false;
+    this._keyActive = false;
     this.__setupRepositionCompletePromise();
   }
 
@@ -31,7 +30,7 @@ export class LionTooltip extends OverlayMixin(LitElement) {
   }
 
   __setupArrowElement() {
-    this.__arrowElement = this.querySelector('[slot=arrow');
+    this.__arrowElement = this.querySelector('[slot=arrow]');
     if (!this.__arrowElement) {
       return;
     }
@@ -87,52 +86,52 @@ export class LionTooltip extends OverlayMixin(LitElement) {
     this.__resetActive = this.__resetActive.bind(this);
     this._overlayCtrl.addEventListener('hide', this.__resetActive);
 
-    this.addEventListener('mouseenter', this.__showMouse);
-    this.addEventListener('mouseleave', this.__hideMouse);
+    this.addEventListener('mouseenter', this._showMouse);
+    this.addEventListener('mouseleave', this._hideMouse);
 
-    this.__showKey = this.__showKey.bind(this);
-    this._overlayInvokerNode.addEventListener('focusin', this.__showKey);
+    this._showKey = this._showKey.bind(this);
+    this._overlayInvokerNode.addEventListener('focusin', this._showKey);
 
-    this.__hideKey = this.__hideKey.bind(this);
-    this._overlayInvokerNode.addEventListener('focusout', this.__hideKey);
+    this._hideKey = this._hideKey.bind(this);
+    this._overlayInvokerNode.addEventListener('focusout', this._hideKey);
   }
 
   _teardownOpenCloseListeners() {
     super._teardownOpenCloseListeners();
     this._overlayCtrl.removeEventListener('hide', this.__resetActive);
-    this.removeEventListener('mouseenter', this.__showMouse);
+    this.removeEventListener('mouseenter', this._showMouse);
     this.removeEventListener('mouseleave', this._hideMouse);
     this._overlayInvokerNode.removeEventListener('focusin', this._showKey);
     this._overlayInvokerNode.removeEventListener('focusout', this._hideKey);
   }
 
   __resetActive() {
-    this.__mouseActive = false;
-    this.__keyActive = false;
+    this._mouseActive = false;
+    this._keyActive = false;
   }
 
-  __showMouse() {
-    if (!this.__keyActive) {
-      this.__mouseActive = true;
+  _showMouse() {
+    if (!this._keyActive) {
+      this._mouseActive = true;
       this.opened = true;
     }
   }
 
-  __hideMouse() {
-    if (!this.__keyActive) {
+  _hideMouse() {
+    if (!this._keyActive) {
       this.opened = false;
     }
   }
 
-  __showKey() {
-    if (!this.__mouseActive) {
-      this.__keyActive = true;
+  _showKey() {
+    if (!this._mouseActive) {
+      this._keyActive = true;
       this.opened = true;
     }
   }
 
-  __hideKey() {
-    if (!this.__mouseActive) {
+  _hideKey() {
+    if (!this._mouseActive) {
       this.opened = false;
     }
   }

packages/tooltip/src/LionTooltipArrow.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from '@lion/core';
+import { css, html, LitElement } from '@lion/core';
 
 export class LionTooltipArrow extends LitElement {
   static get properties() {
@@ -11,15 +11,14 @@ export class LionTooltipArrow extends LitElement {
     return css`
       :host {
         position: absolute;
-        --tooltip-arrow-width: 8px;
-        --tooltip-arrow-height: 6px;
+        --tooltip-arrow-width: 12px;
+        --tooltip-arrow-height: 8px;
         width: var(--tooltip-arrow-width);
         height: var(--tooltip-arrow-height);
-        background: black;
       }
 
-      :host([placement^='top']) {
-        bottom: calc(-1 * var(--tooltip-arrow-height));
+      :host svg {
+        display: block;
       }
 
       :host([placement^='bottom']) {
@@ -28,12 +27,18 @@ export class LionTooltipArrow extends LitElement {
       }
 
       :host([placement^='left']) {
-        right: calc(-1 * var(--tooltip-arrow-height));
+        right: calc(
+          -1 * (var(--tooltip-arrow-height) +
+                (var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2)
+        );
         transform: rotate(270deg);
       }
 
       :host([placement^='right']) {
-        left: calc(-1 * var(--tooltip-arrow-height));
+        left: calc(
+          -1 * (var(--tooltip-arrow-height) +
+                (var(--tooltip-arrow-width) - var(--tooltip-arrow-height)) / 2)
+        );
         transform: rotate(90deg);
       }
     `;
@@ -41,6 +46,10 @@ export class LionTooltipArrow extends LitElement {
 
   /* IE11 will not render the arrow without this method. */
   render() {
-    return html``;
+    return html`
+      <svg viewBox="0 0 12 8">
+        <path d="M 0,0 h 12 L 6,8 z"></path>
+      </svg>
+    `;
   }
 }

packages/tooltip/stories/index.stories.js

@@ -1,7 +1,7 @@
 import { css } from '@lion/core';
 import { html, object, storiesOf, text, withKnobs } from '@open-wc/demoing-storybook';
-import '../lion-tooltip.js';
 import '../lion-tooltip-arrow.js';
+import '../lion-tooltip.js';
 
 const tooltipDemoStyle = css`
   .demo-box {
@@ -15,13 +15,14 @@ const tooltipDemoStyle = css`
   .demo-box_placements {
     display: flex;
     flex-direction: column;
-    width: 173px;
+    width: max-content;
     margin: 0 auto;
     margin-top: 68px;
   }
 
   lion-tooltip {
-    padding: 10px;
+    width: auto;
+    margin: 10px;
   }
 
   .demo-box__column {

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

@@ -65,15 +65,18 @@ describe('lion-tooltip-arrow', () => {
     await el.repositionComplete;
 
     expect(getComputedStyle(arrowElement).getPropertyValue('top')).to.equal(
-      '12px',
-      '30px (content height) - 6px (arrow width) = 24px, divided by 2 = 12px offset --> arrow is in the middle',
+      '11px',
+      '30px (content height) - 8px = 22px, divided by 2 = 11px offset --> arrow is in the middle',
     );
 
     expect(
       getComputedStyle(el.querySelector('lion-tooltip-arrow')).getPropertyValue('left'),
     ).to.equal(
-      '-6px',
-      'arrow width is 6px so this offset should be taken into account to align the arrow properly',
+      '-10px',
+      `
+        arrow height is 8px so this offset should be taken into account to align the arrow properly,
+        as well as half the difference between width and height ((12 - 8) / 2 = 2)
+      `,
     );
   });
 });