@salla.sa/twilight-components
Version:
Salla Web Component
56 lines (52 loc) • 2.69 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
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 = /*@__PURE__*/ proxyCustomElement(class SallaTooltip extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.show = false;
this.targetElement = null;
}
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", { key: 'b0afcb634e39c7ec45478aaa5f5962b86f56bf30', class: "s-tooltip-container" }, h("slot", { key: 'caa9b1f670791ef06a2220f92f060440c2908a31' }), this.show && h("div", { key: 'acae5a536d6c339da0274ea0f19f10148d9fe09e', class: "s-tooltip-item" }, this.text)));
}
get el() { return this; }
static get style() { return sallaTooltipCss; }
}, [4, "salla-tooltip", {
"text": [1],
"targetId": [1, "target-id"],
"show": [32]
}, [[9, "mouseover", "handleMouseOver"], [9, "mouseout", "handleMouseOut"]]]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "salla-tooltip":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaTooltip);
}
break;
} });
}
export { SallaTooltip as S, defineCustomElement as d };
//# sourceMappingURL=salla-tooltip2.js.map
//# sourceMappingURL=salla-tooltip2.js.map