@salla.sa/twilight-components
Version:
Salla Web Component
127 lines (126 loc) • 4.1 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { h } from "@stencil/core";
export class SallaTooltip {
constructor() {
/**
* 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 (h("div", { key: '52b272aea520c20cdd3a46847a003c5acd099ba7', class: "s-tooltip-container" }, h("div", { key: 'b7b5663370e9c5976ffeac9325e7c871156244d1', class: `s-tooltip-item s-tooltip-item--${validTheme}`, style: { display: this.show ? 'block' : 'none' } }, this.text ? h("span", null, this.text) : h("slot", null))));
}
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
},
"theme": {
"type": "string",
"attribute": "theme",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The theme of the tooltip (default, dark)"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'default'"
}
};
}
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
}];
}
}