@exmg/exm-tooltip 1.1.8 → 1.1.10-alpha.19

package/dist/exm-tooltip-base.d.ts

@@ -1,4 +1,5 @@
 import { ExmgElement } from '@exmg/lit-base/index.js';
+type TooltipPositions = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
 export declare class ExmTooltipBase extends ExmgElement {
     /**
      * The id of the element that the tooltip is anchored to. This element
@@ -8,7 +9,7 @@ export declare class ExmTooltipBase extends ExmgElement {
     /**
      * Positions the tooltip to the top, right, bottom, left of its content.
      */
-    position: string;
+    position: TooltipPositions;
     /**
      * If true, no parts of the tooltip will ever be shown offscreen.
      */
@@ -16,16 +17,19 @@ export declare class ExmTooltipBase extends ExmgElement {
     /**
      * X axis offset from the parent's center
      */
-    xOffset?: number;
+    xOffset: number;
     /**
      * Y axis offset from the parent's center
      */
-    yOffset?: number;
-    _showing: boolean;
+    yOffset: number;
+    private showing;
     tooltip?: HTMLElement;
     private _target?;
-    private _boundShow;
-    private _boundHide;
+    private _parent?;
+    private boundShow;
+    private boundHide;
+    private boundMouseMove;
+    private boundMouseLeave;
     /**
      * Returns the target element that this tooltip is anchored to. It is
      * either the element given by the `for` attribute, or the immediate parent
@@ -34,15 +38,19 @@ export declare class ExmTooltipBase extends ExmgElement {
     get target(): any;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    show(): void;
+    protected firstUpdated(): void;
+    private handleMousemove;
+    private handleMouseleave;
+    private show;
     /**
      * Toggles a CSS class on or off.
      */
-    toggleClass(name: string, bool: boolean, node: HTMLElement): void;
-    hide(): void;
-    updatePosition(): void;
-    _addListeners(): void;
-    _findTarget(): void;
-    _removeListeners(): void;
+    private toggleClass;
+    private hide;
+    private updatePosition;
+    private addListeners;
+    private findTarget;
+    private removeListeners;
     protected render(): import("lit-html").TemplateResult<1>;
 }
+export {};

package/dist/exm-tooltip-base.js

@@ -15,7 +15,15 @@ export class ExmTooltipBase extends ExmgElement {
          * If true, no parts of the tooltip will ever be shown offscreen.
          */
         this.fitToVisibleBounds = false;
-        this._showing = false;
+        /**
+         * X axis offset from the parent's center
+         */
+        this.xOffset = 0;
+        /**
+         * Y axis offset from the parent's center
+         */
+        this.yOffset = 0;
+        this.showing = false;
     }
     /**
      * Returns the target element that this tooltip is anchored to. It is
@@ -26,39 +34,72 @@ export class ExmTooltipBase extends ExmgElement {
         const parentNode = this.parentNode;
         // If the parentNode is a document fragment, then we need to use the host.
         const ownerRoot = parentNode.getRootNode();
-        let target;
         if (this.for) {
-            target = ownerRoot.querySelector('#' + this.for);
+            return ownerRoot.querySelector('#' + this.for);
         }
-        else {
-            // @ts-ignore
-            target = parentNode.nodeType == Node.DOCUMENT_FRAGMENT_NODE ? ownerRoot.host : parentNode;
-        }
-        return target;
+        // @ts-ignore
+        return parentNode.nodeType == Node.DOCUMENT_FRAGMENT_NODE ? ownerRoot.host : parentNode;
     }
     connectedCallback() {
         super.connectedCallback();
-        this._boundShow = this.show.bind(this);
-        this._boundHide = this.hide.bind(this);
+        this.boundShow = this.show.bind(this);
+        this.boundHide = this.hide.bind(this);
+        this.boundMouseMove = this.handleMousemove.bind(this);
+        this.boundMouseLeave = this.handleMouseleave.bind(this);
         this.setAttribute('role', 'tooltip');
         this.setAttribute('tabindex', '-1');
-        this._findTarget();
+        this.findTarget();
     }
     disconnectedCallback() {
-        this._removeListeners();
+        this.removeListeners();
         super.disconnectedCallback();
     }
-    show() {
+    firstUpdated() {
+        this.findTarget();
+        this.updatePosition();
+    }
+    handleMousemove(event) {
+        if (!this._target || !this._parent) {
+            return;
+        }
+        const mousePosition = {
+            x: event.clientX,
+            y: event.clientY,
+        };
+        const targetRect = this._target.getBoundingClientRect();
+        if (mousePosition.x < targetRect.left - 1 || mousePosition.x > targetRect.right + 1) {
+            this._parent.removeEventListener('mousemove', this.boundMouseMove);
+            this.hide();
+            return;
+        }
+        if (mousePosition.y < targetRect.top - 1 || mousePosition.y > targetRect.bottom + 1) {
+            this._parent.removeEventListener('mousemove', this.boundMouseMove);
+            this.hide();
+            return;
+        }
+    }
+    handleMouseleave() {
+        if (!this._target || !this._parent) {
+            return;
+        }
+        this.hide();
+        this._parent.removeEventListener('mouseout', this.boundMouseLeave);
+        this._parent.removeEventListener('mousemove', this.boundMouseMove);
+    }
+    show(event) {
+        event.stopPropagation();
         // If the tooltip is already showing, there's nothing to do.
-        if (this._showing) {
+        if (this.showing || !this._parent) {
             return;
         }
+        this._parent.addEventListener('mousemove', this.boundMouseMove);
+        this._parent.addEventListener('mouseout', this.boundMouseLeave);
         if (this.textContent.trim() === '') {
             // Check if effective children are also empty
             let allChildrenEmpty = true;
             const effectiveChildren = this.childNodes;
-            for (let i = 0; i < effectiveChildren.length; i++) {
-                if (effectiveChildren[i].textContent.trim() !== '') {
+            for (const child of effectiveChildren) {
+                if (child.textContent.trim() !== '') {
                     allChildrenEmpty = false;
                     break;
                 }
@@ -67,7 +108,7 @@ export class ExmTooltipBase extends ExmgElement {
                 return;
             }
         }
-        this._showing = true;
+        this.showing = true;
         this.toggleClass('hidden', false, this.tooltip);
         this.updatePosition();
     }
@@ -88,19 +129,19 @@ export class ExmTooltipBase extends ExmgElement {
     }
     hide() {
         // If the tooltip is already hidden, there's nothing to do.
-        if (!this._showing) {
+        if (!this.showing) {
             return;
         }
-        this._showing = false;
+        this.showing = false;
         this.toggleClass('hidden', true, this.tooltip);
     }
     updatePosition() {
-        if (!this._target || !this.offsetParent) {
+        if (!this._target || !this.offsetParent || !this.tooltip) {
             return;
         }
         const parentRect = this.offsetParent.getBoundingClientRect();
         const targetRect = this._target.getBoundingClientRect();
-        const thisRect = this.getBoundingClientRect();
+        const thisRect = this.tooltip.getBoundingClientRect();
         const horizontalCenterOffset = (targetRect.width - thisRect.width) / 2;
         const verticalCenterOffset = (targetRect.height - thisRect.height) / 2;
         const targetLeft = targetRect.left - parentRect.left;
@@ -124,13 +165,25 @@ export class ExmTooltipBase extends ExmgElement {
                 tooltipLeft = targetLeft + targetRect.width;
                 tooltipTop = targetTop + verticalCenterOffset;
                 break;
+            case 'top-left':
+                tooltipLeft = targetLeft;
+                tooltipTop = targetTop - thisRect.height;
+                break;
+            case 'bottom-left':
+                tooltipLeft = targetLeft;
+                tooltipTop = targetTop + targetRect.height;
+                break;
+            case 'top-right':
+                tooltipLeft = targetLeft - thisRect.width + targetRect.width;
+                tooltipTop = targetTop - thisRect.height;
+                break;
+            case 'bottom-right':
+                tooltipLeft = targetLeft - thisRect.width + targetRect.width;
+                tooltipTop = targetTop + targetRect.height;
+                break;
         }
-        if (this.xOffset !== undefined) {
-            tooltipLeft += this.xOffset;
-        }
-        if (this.yOffset !== undefined) {
-            tooltipTop += this.yOffset;
-        }
+        tooltipLeft += this.xOffset;
+        tooltipTop += this.yOffset;
         if (this.fitToVisibleBounds) {
             // Clip the left/right side
             if (parentRect.left + tooltipLeft + thisRect.width > window.innerWidth) {
@@ -156,47 +209,46 @@ export class ExmTooltipBase extends ExmgElement {
             this.style.top = tooltipTop + 'px';
         }
     }
-    _addListeners() {
+    addListeners() {
         if (this._target) {
-            this._target.addEventListener('mouseenter', this._boundShow);
-            this._target.addEventListener('focus', this._boundShow);
-            this._target.addEventListener('mouseleave', this._boundHide);
-            this._target.addEventListener('blur', this._boundHide);
-            this._target.addEventListener('tap', this._boundHide);
+            this._target.addEventListener('mouseenter', this.boundShow);
+            this._target.addEventListener('focus', this.boundShow);
+            this._target.addEventListener('blur', this.boundHide);
+            this._target.addEventListener('tap', this.boundHide);
         }
-        this.addEventListener('mouseenter', this._boundHide);
+        this.addEventListener('mouseenter', this.boundShow);
     }
-    _findTarget() {
-        this._removeListeners();
+    findTarget() {
+        this.removeListeners();
         this._target = this.target;
-        this._addListeners();
+        this._parent = this.parentNode;
+        this.addListeners();
     }
-    _removeListeners() {
+    removeListeners() {
         if (this._target) {
-            this._target.removeEventListener('mouseenter', this._boundShow);
-            this._target.removeEventListener('focus', this._boundShow);
-            this._target.removeEventListener('mouseleave', this._boundHide);
-            this._target.removeEventListener('blur', this._boundHide);
-            this._target.removeEventListener('tap', this._boundHide);
+            this._target.removeEventListener('mouseenter', this.boundShow);
+            this._target.removeEventListener('focus', this.boundShow);
+            this._target.removeEventListener('blur', this.boundHide);
+            this._target.removeEventListener('tap', this.boundHide);
         }
-        this.removeEventListener('mouseenter', this._boundHide);
+        this.removeEventListener('mouseenter', this.boundShow);
     }
     render() {
         return html `
-      <div id="tooltip" class="hidden">
+      <section id="tooltip" class="hidden">
         <slot></slot>
-      </div>
+      </section>
     `;
     }
 }
 __decorate([
     property({ type: String }),
     observer(function () {
-        this._findTarget();
+        this.findTarget();
     })
 ], ExmTooltipBase.prototype, "for", void 0);
 __decorate([
-    property({ type: String })
+    property()
 ], ExmTooltipBase.prototype, "position", void 0);
 __decorate([
     property({ type: Boolean })
@@ -209,7 +261,7 @@ __decorate([
 ], ExmTooltipBase.prototype, "yOffset", void 0);
 __decorate([
     state()
-], ExmTooltipBase.prototype, "_showing", void 0);
+], ExmTooltipBase.prototype, "showing", void 0);
 __decorate([
     query('#tooltip')
 ], ExmTooltipBase.prototype, "tooltip", void 0);

package/dist/styles/exm-tooltip-styles-css.js

@@ -22,7 +22,9 @@ export const style = css `
     padding: var(--exm-tooltip-padding, 8px);
     border-radius: var(--exm-tooltip-border-radius, 2px);
     min-width: var(--exm-tooltip-min-width, initial);
+    width: max-content;
     transition: opacity 0.5s;
+    z-index: 10;
   }
 
   #tooltip.hidden {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-tooltip",
-  "version": "1.1.8",
+  "version": "1.1.10-alpha.19+20be399",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,9 +9,10 @@
     ".": "./dist/index.js",
     "./exm-tooltip.js": "./dist/exm-tooltip.js"
   },
-  "dependencies": {
-    "@exmg/lit-base": "^3.0.0",
-    "lit": "^3.0.0",
+  "peerDependencies": {
+    "@exmg/lit-base": "^3.0.3",
+    "@material/web": "^2.2.0",
+    "lit": "^3.2.1",
     "tslib": "^2.6.2"
   },
   "files": [
@@ -31,12 +32,9 @@
     "directory": "packages/exm-tooltip"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@exmg/lit-cli": "1.1.13"
-  },
   "scripts": {},
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e9c6e6e7b81658423344b640be549700e95be7c0"
+  "gitHead": "20be399892ecc54f71f080f17a677a370d9f2b9c"
 }