@salla.sa/twilight-components
Version:
Salla Web Component
43 lines (38 loc) • 2.42 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
'use strict';
var index = require('./index-uoA36zqH.js');
const sallaTooltipCss = ".s-tooltip-container{position:relative;display:inline-block}.s-tooltip-item{position:absolute;transform:translateX(-63%) translateY(-50%);background-color:var(--color-primary);color:var(--color-primary-reverse);bottom:100%;left:50%;text-align:center;border-radius:5px;z-index:1;white-space:nowrap;opacity:0;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:var(--color-primary) transparent transparent transparent}.s-tooltip-item:dir(ltr){transform:translateX(-72%)}.s-tooltip-item--dark{background-color:#555555;color:white;padding:5px 15px;border-radius:8px;font-size:12px;font-weight:normal;max-width:330px;width:max-content}.s-tooltip-item--dark::after{border-color:#555555 transparent transparent transparent}";
const SallaTooltip = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/**
* The theme of the tooltip (default, dark)
*/
this.theme = 'default';
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() {
const validTheme = ['default', 'dark'].includes(this.theme) ? this.theme : 'default';
return (index.h("div", { key: '4d433085f726528933c9ca19a86b0be84fc35a43', class: "s-tooltip-container" }, index.h("div", { key: 'a458c284385d21f3b4e89f18dd46ff25760a0b10', class: `s-tooltip-item s-tooltip-item--${validTheme}`, style: { display: this.show ? 'block' : 'none' } }, this.text ? index.h("span", null, this.text) : index.h("slot", null))));
}
get el() { return index.getElement(this); }
};
SallaTooltip.style = sallaTooltipCss;
exports.salla_tooltip = SallaTooltip;