@fluid-topics/ft-tooltip 1.1.3 → 1.1.5

package/build/ft-tooltip.js

@@ -5,10 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html } from "lit";
-import { property, query, queryAssignedNodes, state } from "lit/decorators.js";
+import { eventOptions, property, query, queryAssignedNodes, state } from "lit/decorators.js";
 import { Debouncer, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtTypography } from "@fluid-topics/ft-typography";
-import { FtTooltipCssVariables, styles } from "./ft-tooltip.css";
+import { styles } from "./ft-tooltip.css";
+import { autoPlacement, computePosition, shift } from "@floating-ui/dom";
 class FtTooltip extends FtLitElement {
     constructor() {
         super(...arguments);
@@ -100,45 +101,20 @@ class FtTooltip extends FtLitElement {
     }
     positionTooltip() {
         this.resetTooltipContent();
-        const target = this.slottedElement;
-        if (this.tooltip && target) {
-            const tooltipWidth = this.tooltip.offsetWidth;
-            const tooltipHeight = this.tooltip.offsetHeight;
-            const verticalCenter = (target.offsetHeight - tooltipHeight) / 2;
-            const horizontalCenter = (target.offsetWidth - tooltipWidth) / 2;
-            let left = 0;
-            let top = 0;
-            this.tooltip.style.top = "0";
-            this.tooltip.style.left = "0";
-            switch (this.validPosition) {
-                case "top":
-                    top = target.offsetTop - tooltipHeight - this.tooltip.offsetTop;
-                    left = target.offsetLeft + horizontalCenter - this.tooltip.offsetLeft;
-                    break;
-                case "bottom":
-                    top = target.offsetTop + target.offsetHeight - this.tooltip.offsetTop;
-                    left = target.offsetLeft + horizontalCenter - this.tooltip.offsetLeft;
-                    break;
-                case "left":
-                    top = target.offsetTop + verticalCenter - this.tooltip.offsetTop;
-                    left = target.offsetLeft - tooltipWidth - this.tooltip.offsetLeft;
-                    break;
-                case "right":
-                    top = target.offsetTop + verticalCenter - this.tooltip.offsetTop;
-                    left = target.offsetLeft + target.offsetWidth - this.tooltip.offsetLeft;
-                    break;
-            }
-            const style = this.tooltip.style;
-            style.left = left + "px";
-            style.top = top + "px";
-            const boundingClientRect = this.tooltip.getBoundingClientRect();
-            let leftOutOfWindowPixels = -boundingClientRect.x;
-            let rightOutOfWindowPixels = (boundingClientRect.x + boundingClientRect.width) - window.innerWidth;
-            style.left = (left + Math.round(this.correctOutOfWindowPixels(leftOutOfWindowPixels, rightOutOfWindowPixels))) + "px";
-            let topOutOfWindowPixels = -boundingClientRect.y;
-            let bottomOutOfWindowPixels = (boundingClientRect.y + boundingClientRect.height) - window.innerHeight;
-            style.top = (top + Math.round(this.correctOutOfWindowPixels(topOutOfWindowPixels, bottomOutOfWindowPixels))) + "px";
-            style.maxWidth = `max(${target.offsetWidth}px, ${FtTooltipCssVariables.maxWidth})`;
+        if (this.tooltip && this.slottedElement) {
+            this.tooltip.style.left = "";
+            this.tooltip.style.top = "";
+            computePosition(this.slottedElement, this.tooltip, {
+                middleware: [
+                    shift({ crossAxis: true }),
+                    autoPlacement({ allowedPlacements: [this.position] })
+                ],
+            }).then(({ x, y }) => {
+                if (this.tooltip) {
+                    this.tooltip.style.left = `${x}px`;
+                    this.tooltip.style.top = `${y}px`;
+                }
+            });
         }
         this.revealDebouncer.run(() => {
             if (this.tooltipContent) {
@@ -208,4 +184,13 @@ __decorate([
 __decorate([
     state()
 ], FtTooltip.prototype, "visible", void 0);
+__decorate([
+    eventOptions({ passive: true })
+], FtTooltip.prototype, "onTouch", null);
+__decorate([
+    eventOptions({ passive: true })
+], FtTooltip.prototype, "onHover", null);
+__decorate([
+    eventOptions({ passive: true })
+], FtTooltip.prototype, "onOut", null);
 export { FtTooltip };