@salla.sa/twilight-components
Version:
Salla Web Component
101 lines (100 loc) • 2.37 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { h } from "@stencil/core";
export class SallaTooltip {
constructor() {
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)));
}
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",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "text",
"reflect": false
},
"targetId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "target-id",
"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