@fluid-topics/ft-tooltip 1.3.61 → 1.3.62

package/build/ft-tooltip.js

@@ -4,13 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html } from "lit";
-import { property, query, queryAssignedNodes, state } from "lit/decorators.js";
-import { Debouncer, designSystemVariables, eventPathContainsMatchingElement, jsonProperty, numberProperty } from "@fluid-topics/ft-wc-utils";
-import { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { html, } from "lit";
+import { property, query, queryAssignedNodes, state, } from "lit/decorators.js";
+import { Debouncer, designSystemVariables, eventPathContainsMatchingElement, jsonProperty, numberProperty, } from "@fluid-topics/ft-wc-utils";
+import { FtTypography, FtTypographyVariants, } from "@fluid-topics/ft-typography";
 import { styles } from "./ft-tooltip.styles";
 import { computeOffsetPosition } from "@fluid-topics/ft-wc-utils/build/floating";
-import { i18nAttribute } from "@fluid-topics/ft-i18n/build/decorators/i18nAttribute";
+import { i18nAttribute, } from "@fluid-topics/ft-i18n/build/decorators/i18nAttribute";
 import { FtLitElementWithI18n } from "@fluid-topics/ft-i18n";
 class FtTooltip extends FtLitElementWithI18n {
     constructor() {
@@ -68,7 +68,7 @@ class FtTooltip extends FtLitElementWithI18n {
                 <slot part="slot"></slot>
                 <div part="tooltip" role="tooltip" inert
                      class="ft-tooltip ft-tooltip--${this.validPosition}"
-                     ?hidden=${!this.visible}>
+                     popover="manual">
                     <div part="tooltip-content" class="ft-tooltip--content">
                         <slot name="text"></slot>
                         <ft-typography variant="${FtTypographyVariants.caption}" ?hidden=${!((_a = this.text) === null || _a === void 0 ? void 0 : _a.message)}>
@@ -108,8 +108,15 @@ class FtTooltip extends FtLitElementWithI18n {
         }
     }
     updated(props) {
-        if (props.has("visible") && this.visible) {
-            this.resetTooltipContent();
+        var _a, _b;
+        if (props.has("visible")) {
+            if (this.visible) {
+                this.resetTooltipContent();
+                (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.showPopover();
+            }
+            else {
+                (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.hidePopover();
+            }
         }
         super.updated(props);
     }
@@ -188,13 +195,10 @@ class FtTooltip extends FtLitElementWithI18n {
     positionTooltip() {
         this.resetTooltipContent();
         if (this.tooltip && this.slottedElement) {
-            this.tooltip.style.left = "";
-            this.tooltip.style.top = "";
-            computeOffsetPosition(this.slottedElement, this.tooltip, this.position)
+            computeOffsetPosition(this.slottedElement, this.tooltip, { placement: this.position, strategy: "fixed" })
                 .then(({ x, y }) => {
                 if (this.tooltip) {
-                    this.tooltip.style.left = `${x}px`;
-                    this.tooltip.style.top = `${y}px`;
+                    this.tooltip.style.transform = `translate(${x}px,${y}px)`;
                 }
             });
         }