feat(tooltip): change API to popper based

packages/tooltip/package.json

@@ -33,6 +33,7 @@
   ],
   "dependencies": {
     "@lion/core": "^0.1.9",
+    "@lion/popup": "^0.1.23",
     "@lion/overlays": "^0.2.7"
   },
   "devDependencies": {

packages/tooltip/src/LionTooltip.js

@@ -1,31 +1,23 @@
-import { UpdatingElement } from '@lion/core';
+import { LionPopup } from '@lion/popup';
 import { overlays, LocalOverlayController } from '@lion/overlays';
 
-export class LionTooltip extends UpdatingElement {
+export class LionTooltip extends LionPopup {
-  static get properties() {
-    return {
-      position: {
-        type: String,
-      },
-    };
-  }
-
   connectedCallback() {
     super.connectedCallback();
-    this.contenNode = this.querySelector('[slot="content"]');
+    this.contentNode = this.querySelector('[slot="content"]');
     this.invokerNode = this.querySelector('[slot="invoker"]');
 
-    this._tooltip = overlays.add(
+    this._controller = overlays.add(
       new LocalOverlayController({
         hidesOnEsc: true,
         hidesOnOutsideClick: true,
-        placement: this.position,
+        placementConfig: this.placementConfig,
-        contentNode: this.contenNode,
+        contentNode: this.contentNode,
         invokerNode: this.invokerNode,
       }),
     );
-    this._show = () => this._tooltip.show();
+    this._show = () => this._controller.show();
-    this._hide = () => this._tooltip.hide();
+    this._hide = () => this._controller.hide();
 
     this.invokerNode.addEventListener('mouseenter', this._show);
     this.invokerNode.addEventListener('mouseleave', this._hide);

packages/tooltip/stories/index.stories.js

@@ -1,4 +1,4 @@
-import { storiesOf, html } from '@open-wc/demoing-storybook';
+import { storiesOf, html, withKnobs, object, text } from '@open-wc/demoing-storybook';
 import { css } from '@lion/core';
 
 import '@lion/icon/lion-icon.js';
@@ -15,7 +15,7 @@ const tooltipDemoStyle = css`
     padding: 8px;
   }
 
-  .demo-box_positions {
+  .demo-box_placements {
     display: flex;
     flex-direction: column;
     width: 173px;
@@ -40,6 +40,8 @@ const tooltipDemoStyle = css`
     background-color: black;
     border-radius: 4px;
     padding: 8px;
+    /* To display on top of elements with no z-index that are appear later in the DOM */
+    z-index: 1;
   }
 
   @media (max-width: 480px) {
@@ -50,6 +52,7 @@ const tooltipDemoStyle = css`
 `;
 
 storiesOf('Local Overlay System|Tooltip', module)
+  .addDecorator(withKnobs)
   .add(
     'Button tooltip',
     () => html`
@@ -57,36 +60,73 @@ storiesOf('Local Overlay System|Tooltip', module)
         ${tooltipDemoStyle}
       </style>
       <div class="demo-box">
-        <lion-tooltip position="right">
+        <lion-tooltip .placementConfig=${{ placement: 'right' }}>
-          <div slot="content" class="tooltip">hey there</div>
+          <div slot="content" class="tooltip">Hello there!</div>
           <lion-button slot="invoker">Tooltip</lion-button>
         </lion-tooltip>
       </div>
     `,
   )
   .add(
-    'positions',
+    'placements',
     () => html`
       <style>
         ${tooltipDemoStyle}
       </style>
-      <div class="demo-box_positions">
+      <div class="demo-box_placements">
-        <lion-tooltip position="top">
+        <lion-tooltip .placementConfig=${{ placement: 'top' }}>
-          <div slot="content" class="tooltip">Its top position</div>
+          <div slot="content" class="tooltip">Its top placement</div>
           <lion-button slot="invoker">Top</lion-button>
         </lion-tooltip>
-        <lion-tooltip position="right">
+        <lion-tooltip .placementConfig=${{ placement: 'right' }}>
-          <div slot="content" class="tooltip">Its right position</div>
+          <div slot="content" class="tooltip">Its right placement</div>
           <lion-button slot="invoker">Right</lion-button>
         </lion-tooltip>
-        <lion-tooltip position="bottom">
+        <lion-tooltip .placementConfig=${{ placement: 'bottom' }}>
-          <div slot="content" class="tooltip">Its bottom position</div>
+          <div slot="content" class="tooltip">Its bottom placement</div>
           <lion-button slot="invoker">Bottom</lion-button>
         </lion-tooltip>
-        <lion-tooltip position="left">
+        <lion-tooltip .placementConfig=${{ placement: 'left' }}>
-          <div slot="content" class="tooltip">Its left position</div>
+          <div slot="content" class="tooltip">Its left placement</div>
           <lion-button slot="invoker">Left</lion-button>
         </lion-tooltip>
       </div>
     `,
+  )
+  .add(
+    'Override placement configuration',
+    () => html`
+      <style>
+        ${tooltipDemoStyle}
+      </style>
+      <p>Use the Storybook Knobs to dynamically change the placement configuration!</p>
+      <div class="demo-box_placements">
+        <lion-tooltip
+          .placementConfig="${object('Placement Configuration', {
+            placement: 'bottom-start',
+            positionFixed: true,
+            modifiers: {
+              keepTogether: {
+                enabled: true /* Prevents detachment of content element from reference element */,
+              },
+              preventOverflow: {
+                enabled: false /* disables shifting/sliding behavior on secondary axis */,
+                padding: 16 /* when enabled, this is the viewport-margin for shifting/sliding */,
+              },
+              flip: {
+                boundariesElement: 'viewport',
+                padding: 4 /* viewport-margin for flipping on primary axis */,
+              },
+              offset: {
+                enabled: true,
+                offset: `0, 4px` /* horizontal and vertical margin (distance between popper and referenceElement) */,
+              },
+            },
+          })}"
+        >
+          <div slot="content" class="tooltip">${text('Content text', 'Hello, World!')}</div>
+          <lion-button slot="invoker">${text('Invoker text', 'Click me!')}</lion-button>
+        </lion-tooltip>
+      </div>
+    `,
   );

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

@@ -25,6 +25,7 @@ describe('lion-tooltip', () => {
       const eventMouseEnter = new Event('mouseenter');
       invoker.dispatchEvent(eventMouseEnter);
       await el.updateComplete;
+      await aTimeout();
       expect(el.querySelector('[slot="content"]').style.display).to.be.equal('inline-block');
       const eventMouseLeave = new Event('mouseleave');
       invoker.dispatchEvent(eventMouseLeave);