@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
174 lines (173 loc) • 6.31 kB
JavaScript
import { h, Host } from "@stencil/core";
import { convertPropsToClasses } from "./modus-wc-tooltip.tailwind";
import { inheritAriaAttributes } from "../utils";
/**
* A customizable tooltip component used to create tooltips with different content.
*/
export class ModusWcTooltip {
constructor() {
this.inheritedAttributes = {};
/** The text content of the tooltip. */
this.content = '';
/** Custom CSS class to apply to the inner div. */
this.customClass = '';
/** Disables displaying the tooltip on hover */
this.disabled = false;
/** The position that the tooltip will render in relation to the element. */
this.position = 'auto';
}
componentWillLoad() {
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getClasses() {
const classList = ['modus-wc-tooltip'];
const propClasses = convertPropsToClasses({
disabled: this.disabled,
forceOpen: this.forceOpen,
position: this.position,
});
// The order CSS classes are added matters to CSS specificity
if (propClasses)
classList.push(propClasses);
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
render() {
return (h(Host, { key: '482cd87ddc139731c8b09ba6441231657aae0fcd' }, h("div", Object.assign({ key: 'c016ccf4f1d6b654da70a54d419a7a4edf9b652c', class: this.getClasses(), "data-tip": this.content, id: this.tooltipId, role: "tooltip" }, this.inheritedAttributes), h("slot", { key: '2bdb447f86f22eec7d559f1aac143ba5667a86aa' }))));
}
static get is() { return "modus-wc-tooltip"; }
static get originalStyleUrls() {
return {
"$": ["modus-wc-tooltip.scss"]
};
}
static get styleUrls() {
return {
"$": ["modus-wc-tooltip.css"]
};
}
static get properties() {
return {
"content": {
"type": "string",
"attribute": "content",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The text content of the tooltip."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Custom CSS class to apply to the inner div."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Disables displaying the tooltip on hover"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"forceOpen": {
"type": "boolean",
"attribute": "force-open",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Use this attribute to force the tooltip to remain open."
},
"getter": false,
"setter": false,
"reflect": false
},
"tooltipId": {
"type": "string",
"attribute": "tooltip-id",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The ID of the tooltip element, useful for setting the \"aria-describedby\" attribute of related elements."
},
"getter": false,
"setter": false,
"reflect": false
},
"position": {
"type": "string",
"attribute": "position",
"mutable": false,
"complexType": {
"original": "'auto' | 'top' | 'right' | 'bottom' | 'left'",
"resolved": "\"auto\" | \"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The position that the tooltip will render in relation to the element."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'auto'"
}
};
}
static get elementRef() { return "el"; }
}