@salla.sa/twilight-components/dist/esm/salla-tooltip.entry.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { r as registerInstance, h, g as getElement } from './index-114c614f.js';

const sallaTooltipCss = ".s-tooltip-container{position:relative;display:inline-block}.s-tooltip-item{position:absolute;-webkit-transform:translateX(-39%);transform:translateX(-39%);background-color:#baf3e6;color:#004d5a;bottom:100%;left:50%;text-align:center;border-radius:5px;z-index:1;white-space:nowrap;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;pointer-events:none;margin:0 0 16px 8px;padding:12px;max-width:150px;width:190px;white-space:normal;opacity:1}.s-tooltip-item::after{content:\"\";position:absolute;bottom:-10px;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#baf3e6 transparent transparent transparent}.s-tooltip-item:dir(ltr){-webkit-transform:translateX(-72%);transform:translateX(-72%)}";

const SallaTooltip = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.targetElement = null;
    this.text = undefined;
    this.targetId = undefined;
    this.show = false;
  }
  handleMouseOver(event) {
    if (this.targetElement && this.targetElement.contains(event.target)) {
      this.show = true;
    }
  }
  handleMouseOut(event) {
    if (this.targetElement && this.targetElement.contains(event.target)) {
      this.show = false;
    }
  }
  componentDidLoad() {
    // Find the target element based on the targetSelector prop
    this.targetElement = document.getElementById(this.targetId);
  }
  render() {
    return (h("div", { class: "s-tooltip-container" }, h("slot", null), this.show && h("div", { class: "s-tooltip-item" }, this.text)));
  }
  get el() { return getElement(this); }
};
SallaTooltip.style = sallaTooltipCss;

export { SallaTooltip as salla_tooltip };

//# sourceMappingURL=salla-tooltip.entry.js.map