@salla.sa/twilight-components
Version:
Salla Web Component
103 lines (102 loc) • 3.21 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { h } from "@stencil/core";
export class SallaTooltip {
constructor() {
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)));
}
static get is() { return "salla-tooltip"; }
static get originalStyleUrls() {
return {
"$": ["salla-tooltip.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-tooltip.css"]
};
}
static get properties() {
return {
"text": {
"type": "string",
"attribute": "text",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The text content to display in the tooltip"
},
"getter": false,
"setter": false,
"reflect": false
},
"targetId": {
"type": "string",
"attribute": "target-id",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The ID of the target element to which the tooltip is attached"
},
"getter": false,
"setter": false,
"reflect": false
}
};
}
static get states() {
return {
"show": {}
};
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "mouseover",
"method": "handleMouseOver",
"target": "window",
"capture": false,
"passive": true
}, {
"name": "mouseout",
"method": "handleMouseOut",
"target": "window",
"capture": false,
"passive": true
}];
}
}
//# sourceMappingURL=salla-tooltip.js.map