@exmg/exm-tooltip 1.1.9 → 1.1.10-alpha.26

package/.rollup.cache/root/repo/packages/exm-tooltip/dist/exm-tooltip-base.d.ts

@@ -0,0 +1,56 @@
+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
+     * must be a sibling of the tooltip.
+     */
+    for?: string;
+    /**
+     * Positions the tooltip to the top, right, bottom, left of its content.
+     */
+    position: TooltipPositions;
+    /**
+     * If true, no parts of the tooltip will ever be shown offscreen.
+     */
+    fitToVisibleBounds: boolean;
+    /**
+     * X axis offset from the parent's center
+     */
+    xOffset: number;
+    /**
+     * Y axis offset from the parent's center
+     */
+    yOffset: number;
+    private showing;
+    tooltip?: HTMLElement;
+    private _target?;
+    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
+     * of the tooltip.
+     */
+    get target(): any;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    private handleMousemove;
+    private handleMouseleave;
+    private show;
+    /**
+     * Toggles a CSS class on or off.
+     */
+    private toggleClass;
+    private hide;
+    private updatePosition;
+    private addListeners;
+    private findTarget;
+    private removeListeners;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/.rollup.cache/root/repo/packages/exm-tooltip/dist/exm-tooltip-base.js

@@ -0,0 +1,268 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { property } from 'lit/decorators/property.js';
+import { state } from 'lit/decorators.js';
+import { query } from 'lit/decorators/query.js';
+import { ExmgElement, observer } from '@exmg/lit-base/index.js';
+export class ExmTooltipBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Positions the tooltip to the top, right, bottom, left of its content.
+         */
+        this.position = 'bottom';
+        /**
+         * If true, no parts of the tooltip will ever be shown offscreen.
+         */
+        this.fitToVisibleBounds = 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
+     * either the element given by the `for` attribute, or the immediate parent
+     * of the tooltip.
+     */
+    get target() {
+        const parentNode = this.parentNode;
+        // If the parentNode is a document fragment, then we need to use the host.
+        const ownerRoot = parentNode.getRootNode();
+        if (this.for) {
+            return ownerRoot.querySelector('#' + this.for);
+        }
+        // @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.boundMouseMove = this.handleMousemove.bind(this);
+        this.boundMouseLeave = this.handleMouseleave.bind(this);
+        this.setAttribute('role', 'tooltip');
+        this.setAttribute('tabindex', '-1');
+        this.findTarget();
+    }
+    disconnectedCallback() {
+        this.removeListeners();
+        super.disconnectedCallback();
+    }
+    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 || !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 (const child of effectiveChildren) {
+                if (child.textContent.trim() !== '') {
+                    allChildrenEmpty = false;
+                    break;
+                }
+            }
+            if (allChildrenEmpty) {
+                return;
+            }
+        }
+        this.showing = true;
+        this.toggleClass('hidden', false, this.tooltip);
+        this.updatePosition();
+    }
+    /**
+     * Toggles a CSS class on or off.
+     */
+    toggleClass(name, bool, node) {
+        node = /** @type {Element} */ node || this;
+        if (arguments.length == 1) {
+            bool = !node.classList.contains(name);
+        }
+        if (bool) {
+            node.classList.add(name);
+        }
+        else {
+            node.classList.remove(name);
+        }
+    }
+    hide() {
+        // If the tooltip is already hidden, there's nothing to do.
+        if (!this.showing) {
+            return;
+        }
+        this.showing = false;
+        this.toggleClass('hidden', true, this.tooltip);
+    }
+    updatePosition() {
+        if (!this._target || !this.offsetParent || !this.tooltip) {
+            return;
+        }
+        const parentRect = this.offsetParent.getBoundingClientRect();
+        const targetRect = this._target.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;
+        const targetTop = targetRect.top - parentRect.top;
+        let tooltipLeft = 0;
+        let tooltipTop = 0;
+        switch (this.position) {
+            case 'top':
+                tooltipLeft = targetLeft + horizontalCenterOffset;
+                tooltipTop = targetTop - thisRect.height;
+                break;
+            case 'bottom':
+                tooltipLeft = targetLeft + horizontalCenterOffset;
+                tooltipTop = targetTop + targetRect.height;
+                break;
+            case 'left':
+                tooltipLeft = targetLeft - thisRect.width;
+                tooltipTop = targetTop + verticalCenterOffset;
+                break;
+            case 'right':
+                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;
+        }
+        tooltipLeft += this.xOffset;
+        tooltipTop += this.yOffset;
+        if (this.fitToVisibleBounds) {
+            // Clip the left/right side
+            if (parentRect.left + tooltipLeft + thisRect.width > window.innerWidth) {
+                this.style.right = '0px';
+                this.style.left = 'auto';
+            }
+            else {
+                this.style.left = Math.max(0, tooltipLeft) + 'px';
+                this.style.right = 'auto';
+            }
+            // Clip the top/bottom side.
+            if (parentRect.top + tooltipTop + thisRect.height > window.innerHeight) {
+                this.style.bottom = parentRect.height + 'px';
+                this.style.top = 'auto';
+            }
+            else {
+                this.style.top = Math.max(-parentRect.top, tooltipTop) + 'px';
+                this.style.bottom = 'auto';
+            }
+        }
+        else {
+            this.style.left = tooltipLeft + 'px';
+            this.style.top = tooltipTop + 'px';
+        }
+    }
+    addListeners() {
+        if (this._target) {
+            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.boundShow);
+    }
+    findTarget() {
+        this.removeListeners();
+        this._target = this.target;
+        this._parent = this.parentNode;
+        this.addListeners();
+    }
+    removeListeners() {
+        if (this._target) {
+            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.boundShow);
+    }
+    render() {
+        return html `
+      <section id="tooltip" class="hidden">
+        <slot></slot>
+      </section>
+    `;
+    }
+}
+__decorate([
+    property({ type: String }),
+    observer(function () {
+        this.findTarget();
+    })
+], ExmTooltipBase.prototype, "for", void 0);
+__decorate([
+    property()
+], ExmTooltipBase.prototype, "position", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmTooltipBase.prototype, "fitToVisibleBounds", void 0);
+__decorate([
+    property({ type: Number })
+], ExmTooltipBase.prototype, "xOffset", void 0);
+__decorate([
+    property({ type: Number })
+], ExmTooltipBase.prototype, "yOffset", void 0);
+__decorate([
+    state()
+], ExmTooltipBase.prototype, "showing", void 0);
+__decorate([
+    query('#tooltip')
+], ExmTooltipBase.prototype, "tooltip", void 0);
+//# sourceMappingURL=exm-tooltip-base.js.map

package/.rollup.cache/root/repo/packages/exm-tooltip/dist/exm-tooltip.d.ts

@@ -0,0 +1,33 @@
+import { ExmTooltipBase } from './exm-tooltip-base.js';
+/**
+ * `exm-tooltip`
+ * Example:
+ * ```html
+ *  <div style="position:relative;">
+ *    <button id="styledBtn">Test</button>
+ *    <exm-tooltip for="styledBtn">the name means "different lizard"</exm-tooltip>
+ *  </div>
+ * ```
+ *
+ * ### Styling
+ * The following custom properties and mixins are available for styling:
+ *
+ * Custom property | Description | Default
+ * ----------------|-------------|----------
+ * `--exm-tooltip-font-size` | Font size of tooltip text | 10px
+ * `--exm-tooltip-line-height` | Text line height | 1
+ * `--exm-tooltip-background` | Background color | #616161
+ * `--exm-tooltip-opacity` | Tooltip opacity | 0.9
+ * `--exm-tooltip-text-color` | Font color | white
+ * `--exm-tooltip-padding` | Container padding | 8px
+ * `--exm-tooltip-border-radius` | Container border radius | 2px
+ * `--exm-tooltip-min-width` | Breadcrumb container background color | initial
+ */
+export declare class ExmTooltip extends ExmTooltipBase {
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-tooltip': ExmTooltip;
+    }
+}

package/.rollup.cache/root/repo/packages/exm-tooltip/dist/exm-tooltip.js

@@ -0,0 +1,36 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators/custom-element.js';
+import { style } from './styles/exm-tooltip-styles-css.js';
+import { ExmTooltipBase } from './exm-tooltip-base.js';
+/**
+ * `exm-tooltip`
+ * Example:
+ * ```html
+ *  <div style="position:relative;">
+ *    <button id="styledBtn">Test</button>
+ *    <exm-tooltip for="styledBtn">the name means "different lizard"</exm-tooltip>
+ *  </div>
+ * ```
+ *
+ * ### Styling
+ * The following custom properties and mixins are available for styling:
+ *
+ * Custom property | Description | Default
+ * ----------------|-------------|----------
+ * `--exm-tooltip-font-size` | Font size of tooltip text | 10px
+ * `--exm-tooltip-line-height` | Text line height | 1
+ * `--exm-tooltip-background` | Background color | #616161
+ * `--exm-tooltip-opacity` | Tooltip opacity | 0.9
+ * `--exm-tooltip-text-color` | Font color | white
+ * `--exm-tooltip-padding` | Container padding | 8px
+ * `--exm-tooltip-border-radius` | Container border radius | 2px
+ * `--exm-tooltip-min-width` | Breadcrumb container background color | initial
+ */
+let ExmTooltip = class ExmTooltip extends ExmTooltipBase {
+};
+ExmTooltip.styles = style;
+ExmTooltip = __decorate([
+    customElement('exm-tooltip')
+], ExmTooltip);
+export { ExmTooltip };
+//# sourceMappingURL=exm-tooltip.js.map

package/.rollup.cache/root/repo/packages/exm-tooltip/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { ExmTooltip } from './exm-tooltip.js';
+export { ExmTooltipBase } from './exm-tooltip-base.js';
+export { style as tooltipStyles } from './styles/exm-tooltip-styles-css.js';

package/.rollup.cache/root/repo/packages/exm-tooltip/dist/index.js

@@ -0,0 +1,4 @@
+export { ExmTooltip } from './exm-tooltip.js';
+export { ExmTooltipBase } from './exm-tooltip-base.js';
+export { style as tooltipStyles } from './styles/exm-tooltip-styles-css.js';
+//# sourceMappingURL=index.js.map

package/.rollup.cache/root/repo/packages/exm-tooltip/dist/styles/exm-tooltip-styles-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/.rollup.cache/root/repo/packages/exm-tooltip/dist/styles/exm-tooltip-styles-css.js

@@ -0,0 +1,35 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    display: block;
+    position: absolute;
+    outline: none;
+    z-index: var(--exm-tooltip-z-index, 1002);
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: default;
+  }
+
+  #tooltip {
+    display: block;
+    outline: none;
+    font-size: var(--exm-tooltip-font-size, 12px);
+    line-height: var(--exm-tooltip-line-height, 14px);
+    background-color: var(--exm-tooltip-background-color, var(--md-sys-color-inverse-surface, #333));
+    color: var(--exm-tooltip-color, var(--md-sys-color-inverse-on-surface, white));
+    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 {
+    opacity: 0;
+    display: none;
+  }
+`;
+//# sourceMappingURL=exm-tooltip-styles-css.js.map

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

@@ -1,10 +1,11 @@
-import { __decorate } from "tslib";
+import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { property } from 'lit/decorators/property.js';
 import { state } from 'lit/decorators.js';
 import { query } from 'lit/decorators/query.js';
-import { ExmgElement, observer } from '@exmg/lit-base/index.js';
-export class ExmTooltipBase extends ExmgElement {
+import { observer, ExmgElement } from '@exmg/lit-base/index.js';
+
+class ExmTooltipBase extends ExmgElement {
     constructor() {
         super(...arguments);
         /**
@@ -15,7 +16,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 +35,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 +109,7 @@ export class ExmTooltipBase extends ExmgElement {
                 return;
             }
         }
-        this._showing = true;
+        this.showing = true;
         this.toggleClass('hidden', false, this.tooltip);
         this.updatePosition();
     }
@@ -88,19 +130,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 +166,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 +210,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,8 +262,10 @@ __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);
-//# sourceMappingURL=exm-tooltip-base.js.map
+
+export { ExmTooltipBase };
+//# sourceMappingURL=exm-tooltip-base.js.map

package/dist/exm-tooltip.js

@@ -1,7 +1,8 @@
-import { __decorate } from "tslib";
+import { __decorate } from 'tslib';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { style } from './styles/exm-tooltip-styles-css.js';
 import { ExmTooltipBase } from './exm-tooltip-base.js';
+
 /**
  * `exm-tooltip`
  * Example:
@@ -32,5 +33,6 @@ ExmTooltip.styles = style;
 ExmTooltip = __decorate([
     customElement('exm-tooltip')
 ], ExmTooltip);
+
 export { ExmTooltip };
-//# sourceMappingURL=exm-tooltip.js.map
+//# sourceMappingURL=exm-tooltip.js.map

package/dist/index.js

@@ -1,4 +1,4 @@
 export { ExmTooltip } from './exm-tooltip.js';
 export { ExmTooltipBase } from './exm-tooltip-base.js';
 export { style as tooltipStyles } from './styles/exm-tooltip-styles-css.js';
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const style = css `
+
+const style = css `
   :host {
     display: block;
     position: absolute;
@@ -22,7 +23,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 {
@@ -30,4 +33,6 @@ export const style = css `
     display: none;
   }
 `;
-//# sourceMappingURL=exm-tooltip-styles-css.js.map
+
+export { style };
+//# sourceMappingURL=exm-tooltip-styles-css.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-tooltip",
-  "version": "1.1.9",
+  "version": "1.1.10-alpha.26+dffd4ec",
   "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": "ac876ab3f3d6d83a43a3944c052c8e71de300832"
+  "gitHead": "dffd4ecb68fdeb061f4e8ad585af221bfb0f8e8b"
 }