🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
@operato/utils
Advanced tools
@operato/utils - npm Package Compare versions
+9
-0
@@ -6,2 +6,11 @@ # Change Log | ||
| ## [7.0.0-rc.7](https://github.com/hatiolab/operato/compare/v7.0.0-rc.6...v7.0.0-rc.7) (2024-06-28) | ||
| ### :bug: Bug Fix | ||
| * tooltip 이 부모의 transform을 반영하지 못하는 문제 ([992d295](https://github.com/hatiolab/operato/commit/992d2950a5407a94254b910b4b2d0d6b83d5df59)) | ||
| ## [7.0.0-rc.0](https://github.com/hatiolab/operato/compare/v2.0.0-beta.35...v7.0.0-rc.0) (2024-06-21) | ||
@@ -8,0 +17,0 @@ |
| import { ReactiveController, ReactiveControllerHost } from 'lit'; | ||
| /** | ||
| * TooltipReactiveController is a controller that manages the display of tooltips | ||
| * for elements with a specified attribute. It works in conjunction with TooltipStyles | ||
| * to position and style the tooltips. | ||
| */ | ||
| export declare class TooltipReactiveController implements ReactiveController { | ||
@@ -11,8 +6,3 @@ private host; | ||
| private content?; | ||
| /** | ||
| * @param host - The host element that this controller is associated with. | ||
| * @param options - An optional object containing the content of the tooltip and the attribute name that triggers the tooltip. | ||
| * - content: The tooltip content, either a string or a function that returns a string based on the element. | ||
| * - attributeName: The attribute name that triggers the tooltip. Defaults to 'data-reactive-tooltip'. | ||
| */ | ||
| private static tooltipContainer; | ||
| constructor(host: ReactiveControllerHost & HTMLElement, options?: { | ||
@@ -22,21 +12,6 @@ content?: string | ((element: HTMLElement) => string); | ||
| }); | ||
| /** | ||
| * Called when the host is connected to the DOM. Adds event listeners for mouseover and mouseout events. | ||
| */ | ||
| hostConnected(): void; | ||
| /** | ||
| * Called when the host is disconnected from the DOM. Removes event listeners for mouseover and mouseout events. | ||
| */ | ||
| hostDisconnected(): void; | ||
| /** | ||
| * Handles the mouseover event. Checks if the target element has the specified attribute and if it has overflow. | ||
| * If both conditions are met, sets the tooltip content and calculates its position. | ||
| * @param e - The mouseover event. | ||
| */ | ||
| private handleMouseOver; | ||
| /** | ||
| * Handles the mouseout event. Removes the tooltip content and position properties from the target element. | ||
| * @param e - The mouseout event. | ||
| */ | ||
| private handleMouseOut; | ||
| } |
| import { hasOverflow } from '../has-overflow'; | ||
| /** | ||
| * TooltipReactiveController is a controller that manages the display of tooltips | ||
| * for elements with a specified attribute. It works in conjunction with TooltipStyles | ||
| * to position and style the tooltips. | ||
| */ | ||
| export class TooltipReactiveController { | ||
| /** | ||
| * @param host - The host element that this controller is associated with. | ||
| * @param options - An optional object containing the content of the tooltip and the attribute name that triggers the tooltip. | ||
| * - content: The tooltip content, either a string or a function that returns a string based on the element. | ||
| * - attributeName: The attribute name that triggers the tooltip. Defaults to 'data-reactive-tooltip'. | ||
| */ | ||
| constructor(host, options) { | ||
| /** | ||
| * Handles the mouseover event. Checks if the target element has the specified attribute and if it has overflow. | ||
| * If both conditions are met, sets the tooltip content and calculates its position. | ||
| * @param e - The mouseover event. | ||
| */ | ||
| this.handleMouseOver = (e) => { | ||
@@ -24,21 +8,19 @@ var _a; | ||
| if (element.hasAttribute(this.attributeName) && hasOverflow(element)) { | ||
| element.setAttribute('data-tooltip', typeof this.content === 'function' | ||
| const tooltipContent = typeof this.content === 'function' | ||
| ? this.content.call(this, element) | ||
| : this.content || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''); | ||
| : this.content || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || ''; | ||
| const rect = element.getBoundingClientRect(); | ||
| // Set CSS variables for position | ||
| element.style.setProperty('--tooltip-top', `${rect.top + rect.height}px`); | ||
| element.style.setProperty('--tooltip-left', `${rect.left}px`); | ||
| // Calculate the fixed position | ||
| const fixedTop = rect.top + rect.height; | ||
| const fixedLeft = rect.left; | ||
| // Set tooltip container position and content | ||
| TooltipReactiveController.tooltipContainer.style.top = `${fixedTop}px`; | ||
| TooltipReactiveController.tooltipContainer.style.left = `${fixedLeft}px`; | ||
| TooltipReactiveController.tooltipContainer.style.display = 'block'; | ||
| TooltipReactiveController.tooltipContainer.textContent = tooltipContent; | ||
| } | ||
| }; | ||
| /** | ||
| * Handles the mouseout event. Removes the tooltip content and position properties from the target element. | ||
| * @param e - The mouseout event. | ||
| */ | ||
| this.handleMouseOut = (e) => { | ||
| const element = e.target; | ||
| if (element.hasAttribute('data-tooltip')) { | ||
| element.removeAttribute('data-tooltip'); | ||
| element.style.removeProperty('--tooltip-top'); | ||
| element.style.removeProperty('--tooltip-left'); | ||
| if (TooltipReactiveController.tooltipContainer) { | ||
| TooltipReactiveController.tooltipContainer.style.display = 'none'; | ||
| } | ||
@@ -51,6 +33,25 @@ }; | ||
| host.addController(this); | ||
| // Create a tooltip container element if it doesn't exist | ||
| if (!TooltipReactiveController.tooltipContainer) { | ||
| TooltipReactiveController.tooltipContainer = document.createElement('div'); | ||
| TooltipReactiveController.tooltipContainer.className = 'ox-tooltip-container'; | ||
| TooltipReactiveController.tooltipContainer.style.position = 'fixed'; | ||
| TooltipReactiveController.tooltipContainer.style.pointerEvents = 'none'; | ||
| TooltipReactiveController.tooltipContainer.style.zIndex = '1000'; | ||
| // Set default styles using CSS variables | ||
| TooltipReactiveController.tooltipContainer.style.fontSize = 'var(--tooltip-font-size, 1.0em)'; | ||
| TooltipReactiveController.tooltipContainer.style.color = 'var(--tooltip-color, #fff)'; | ||
| TooltipReactiveController.tooltipContainer.style.backgroundColor = | ||
| 'var(--tooltip-background-color, rgba(0, 0, 0, 0.7))'; | ||
| TooltipReactiveController.tooltipContainer.style.padding = 'var(--tooltip-padding, 5px)'; | ||
| TooltipReactiveController.tooltipContainer.style.borderRadius = 'var(--tooltip-border-radius, 3px)'; | ||
| TooltipReactiveController.tooltipContainer.style.boxShadow = | ||
| 'var(--tooltip-box-shadow, 0 2px 10px rgba(0, 0, 0, 0.2))'; | ||
| TooltipReactiveController.tooltipContainer.style.maxWidth = 'var(--tooltip-max-width, 300px)'; | ||
| TooltipReactiveController.tooltipContainer.style.wordWrap = 'break-word'; | ||
| TooltipReactiveController.tooltipContainer.style.whiteSpace = 'pre-wrap'; | ||
| TooltipReactiveController.tooltipContainer.style.overflow = 'hidden'; | ||
| document.body.appendChild(TooltipReactiveController.tooltipContainer); | ||
| } | ||
| } | ||
| /** | ||
| * Called when the host is connected to the DOM. Adds event listeners for mouseover and mouseout events. | ||
| */ | ||
| hostConnected() { | ||
@@ -62,5 +63,2 @@ var _a; | ||
| } | ||
| /** | ||
| * Called when the host is disconnected from the DOM. Removes event listeners for mouseover and mouseout events. | ||
| */ | ||
| hostDisconnected() { | ||
@@ -73,2 +71,3 @@ var _a; | ||
| } | ||
| TooltipReactiveController.tooltipContainer = null; | ||
| //# sourceMappingURL=tooltip-reactive-controller.js.map |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"file":"tooltip-reactive-controller.js","sourceRoot":"","sources":["../../../src/reactive-controllers/tooltip-reactive-controller.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE7C;;;;GAIG;AACH,MAAM,OAAO,yBAAyB;IAKpC;;;;;OAKG;IACH,YACE,IAA0C,EAC1C,OAGC;QA6BH;;;;WAIG;QACK,oBAAe,GAAG,CAAC,CAAQ,EAAE,EAAE;;YACrC,MAAM,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;YACvC,IAAI,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;gBACrE,OAAO,CAAC,YAAY,CAClB,cAAc,EACd,OAAO,IAAI,CAAC,OAAO,KAAK,UAAU;oBAChC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;oBAClC,CAAC,CAAC,IAAI,CAAC,OAAO,KAAI,MAAA,OAAO,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAA,IAAI,EAAE,CACtD,CAAA;gBAED,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAA;gBAE5C,iCAAiC;gBACjC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,eAAe,EAAE,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,CAAA;gBACzE,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAA;YAC/D,CAAC;QACH,CAAC,CAAA;QAED;;;WAGG;QACK,mBAAc,GAAG,CAAC,CAAQ,EAAE,EAAE;YACpC,MAAM,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;YACvC,IAAI,OAAO,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,CAAC;gBACzC,OAAO,CAAC,eAAe,CAAC,cAAc,CAAC,CAAA;gBACvC,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAA;gBAC7C,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAA;YAChD,CAAC;QACH,CAAC,CAAA;QA7DC,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,OAAO,IAAI,EAAE,CAAA;QAEhD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,aAAa,GAAG,aAAa,IAAI,uBAAuB,CAAA;QAC7D,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QAEtB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;IAC1B,CAAC;IAED;;OAEG;IACH,aAAa;;QACX,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,mCAAI,IAAI,CAAC,IAAI,CAAA;QAChD,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;QAC1D,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;IAC1D,CAAC;IAED;;OAEG;IACH,gBAAgB;;QACd,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,mCAAI,IAAI,CAAC,IAAI,CAAA;QAChD,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;QAC7D,MAAM,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;IAC7D,CAAC;CAqCF","sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { hasOverflow } from '../has-overflow'\n\n/**\n * TooltipReactiveController is a controller that manages the display of tooltips\n * for elements with a specified attribute. It works in conjunction with TooltipStyles\n * to position and style the tooltips.\n */\nexport class TooltipReactiveController implements ReactiveController {\n private host: ReactiveControllerHost & HTMLElement\n private attributeName!: string\n private content?: string | ((element: HTMLElement) => string)\n\n /**\n * @param host - The host element that this controller is associated with.\n * @param options - An optional object containing the content of the tooltip and the attribute name that triggers the tooltip.\n * - content: The tooltip content, either a string or a function that returns a string based on the element.\n * - attributeName: The attribute name that triggers the tooltip. Defaults to 'data-reactive-tooltip'.\n */\n constructor(\n host: ReactiveControllerHost & HTMLElement,\n options?: {\n content?: string | ((element: HTMLElement) => string)\n attributeName?: string\n }\n ) {\n const { attributeName, content } = options || {}\n\n this.host = host\n this.attributeName = attributeName || 'data-reactive-tooltip'\n this.content = content\n\n host.addController(this)\n }\n\n /**\n * Called when the host is connected to the DOM. Adds event listeners for mouseover and mouseout events.\n */\n hostConnected() {\n const target = this.host.shadowRoot ?? this.host\n target.addEventListener('mouseover', this.handleMouseOver)\n target.addEventListener('mouseout', this.handleMouseOut)\n }\n\n /**\n * Called when the host is disconnected from the DOM. Removes event listeners for mouseover and mouseout events.\n */\n hostDisconnected() {\n const target = this.host.shadowRoot ?? this.host\n target.removeEventListener('mouseover', this.handleMouseOver)\n target.removeEventListener('mouseout', this.handleMouseOut)\n }\n\n /**\n * Handles the mouseover event. Checks if the target element has the specified attribute and if it has overflow.\n * If both conditions are met, sets the tooltip content and calculates its position.\n * @param e - The mouseover event.\n */\n private handleMouseOver = (e: Event) => {\n const element = e.target as HTMLElement\n if (element.hasAttribute(this.attributeName) && hasOverflow(element)) {\n element.setAttribute(\n 'data-tooltip',\n typeof this.content === 'function'\n ? this.content.call(this, element)\n : this.content || element.textContent?.trim() || ''\n )\n\n const rect = element.getBoundingClientRect()\n\n // Set CSS variables for position\n element.style.setProperty('--tooltip-top', `${rect.top + rect.height}px`)\n element.style.setProperty('--tooltip-left', `${rect.left}px`)\n }\n }\n\n /**\n * Handles the mouseout event. Removes the tooltip content and position properties from the target element.\n * @param e - The mouseout event.\n */\n private handleMouseOut = (e: Event) => {\n const element = e.target as HTMLElement\n if (element.hasAttribute('data-tooltip')) {\n element.removeAttribute('data-tooltip')\n element.style.removeProperty('--tooltip-top')\n element.style.removeProperty('--tooltip-left')\n }\n }\n}\n"]} | ||
| {"version":3,"file":"tooltip-reactive-controller.js","sourceRoot":"","sources":["../../../src/reactive-controllers/tooltip-reactive-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit'\nimport { hasOverflow } from '../has-overflow'\n\nexport class TooltipReactiveController implements ReactiveController {\n private host: ReactiveControllerHost & HTMLElement\n private attributeName: string\n private content?: string | ((element: HTMLElement) => string)\n private static tooltipContainer: HTMLElement | null = null\n\n constructor(\n host: ReactiveControllerHost & HTMLElement,\n options?: {\n content?: string | ((element: HTMLElement) => string)\n attributeName?: string\n }\n ) {\n const { attributeName, content } = options || {}\n\n this.host = host\n this.attributeName = attributeName || 'data-reactive-tooltip'\n this.content = content\n\n host.addController(this)\n\n // Create a tooltip container element if it doesn't exist\n if (!TooltipReactiveController.tooltipContainer) {\n TooltipReactiveController.tooltipContainer = document.createElement('div')\n TooltipReactiveController.tooltipContainer.className = 'ox-tooltip-container'\n TooltipReactiveController.tooltipContainer.style.position = 'fixed'\n TooltipReactiveController.tooltipContainer.style.pointerEvents = 'none'\n TooltipReactiveController.tooltipContainer.style.zIndex = '1000'\n // Set default styles using CSS variables\n TooltipReactiveController.tooltipContainer.style.fontSize = 'var(--tooltip-font-size, 1.0em)'\n TooltipReactiveController.tooltipContainer.style.color = 'var(--tooltip-color, #fff)'\n TooltipReactiveController.tooltipContainer.style.backgroundColor =\n 'var(--tooltip-background-color, rgba(0, 0, 0, 0.7))'\n TooltipReactiveController.tooltipContainer.style.padding = 'var(--tooltip-padding, 5px)'\n TooltipReactiveController.tooltipContainer.style.borderRadius = 'var(--tooltip-border-radius, 3px)'\n TooltipReactiveController.tooltipContainer.style.boxShadow =\n 'var(--tooltip-box-shadow, 0 2px 10px rgba(0, 0, 0, 0.2))'\n TooltipReactiveController.tooltipContainer.style.maxWidth = 'var(--tooltip-max-width, 300px)'\n TooltipReactiveController.tooltipContainer.style.wordWrap = 'break-word'\n TooltipReactiveController.tooltipContainer.style.whiteSpace = 'pre-wrap'\n TooltipReactiveController.tooltipContainer.style.overflow = 'hidden'\n document.body.appendChild(TooltipReactiveController.tooltipContainer)\n }\n }\n\n hostConnected() {\n const target = this.host.shadowRoot ?? this.host\n target.addEventListener('mouseover', this.handleMouseOver)\n target.addEventListener('mouseout', this.handleMouseOut)\n }\n\n hostDisconnected() {\n const target = this.host.shadowRoot ?? this.host\n target.removeEventListener('mouseover', this.handleMouseOver)\n target.removeEventListener('mouseout', this.handleMouseOut)\n }\n\n private handleMouseOver = (e: Event) => {\n const element = e.target as HTMLElement\n if (element.hasAttribute(this.attributeName) && hasOverflow(element)) {\n const tooltipContent =\n typeof this.content === 'function'\n ? this.content.call(this, element)\n : this.content || element.textContent?.trim() || ''\n\n const rect = element.getBoundingClientRect()\n\n // Calculate the fixed position\n const fixedTop = rect.top + rect.height\n const fixedLeft = rect.left\n\n // Set tooltip container position and content\n TooltipReactiveController.tooltipContainer!.style.top = `${fixedTop}px`\n TooltipReactiveController.tooltipContainer!.style.left = `${fixedLeft}px`\n TooltipReactiveController.tooltipContainer!.style.display = 'block'\n TooltipReactiveController.tooltipContainer!.textContent = tooltipContent\n }\n }\n\n private handleMouseOut = (e: Event) => {\n if (TooltipReactiveController.tooltipContainer) {\n TooltipReactiveController.tooltipContainer.style.display = 'none'\n }\n }\n}\n"]} |
+2
-2
@@ -5,3 +5,3 @@ { | ||
| "author": "heartyoh", | ||
| "version": "7.0.0-rc.0", | ||
| "version": "7.0.0-rc.7", | ||
| "main": "dist/src/index.js", | ||
@@ -123,3 +123,3 @@ "module": "dist/src/index.js", | ||
| }, | ||
| "gitHead": "6ea42336e40d8eae2c11a9ebdfc21dd1cbcefca1" | ||
| "gitHead": "e7397f319e71283841e2879b4eb9e7a3a3af55cf" | ||
| } |
| import { ReactiveController, ReactiveControllerHost } from 'lit' | ||
| import { hasOverflow } from '../has-overflow' | ||
| /** | ||
| * TooltipReactiveController is a controller that manages the display of tooltips | ||
| * for elements with a specified attribute. It works in conjunction with TooltipStyles | ||
| * to position and style the tooltips. | ||
| */ | ||
| export class TooltipReactiveController implements ReactiveController { | ||
| private host: ReactiveControllerHost & HTMLElement | ||
| private attributeName!: string | ||
| private attributeName: string | ||
| private content?: string | ((element: HTMLElement) => string) | ||
| private static tooltipContainer: HTMLElement | null = null | ||
| /** | ||
| * @param host - The host element that this controller is associated with. | ||
| * @param options - An optional object containing the content of the tooltip and the attribute name that triggers the tooltip. | ||
| * - content: The tooltip content, either a string or a function that returns a string based on the element. | ||
| * - attributeName: The attribute name that triggers the tooltip. Defaults to 'data-reactive-tooltip'. | ||
| */ | ||
| constructor( | ||
@@ -34,7 +24,27 @@ host: ReactiveControllerHost & HTMLElement, | ||
| host.addController(this) | ||
| // Create a tooltip container element if it doesn't exist | ||
| if (!TooltipReactiveController.tooltipContainer) { | ||
| TooltipReactiveController.tooltipContainer = document.createElement('div') | ||
| TooltipReactiveController.tooltipContainer.className = 'ox-tooltip-container' | ||
| TooltipReactiveController.tooltipContainer.style.position = 'fixed' | ||
| TooltipReactiveController.tooltipContainer.style.pointerEvents = 'none' | ||
| TooltipReactiveController.tooltipContainer.style.zIndex = '1000' | ||
| // Set default styles using CSS variables | ||
| TooltipReactiveController.tooltipContainer.style.fontSize = 'var(--tooltip-font-size, 1.0em)' | ||
| TooltipReactiveController.tooltipContainer.style.color = 'var(--tooltip-color, #fff)' | ||
| TooltipReactiveController.tooltipContainer.style.backgroundColor = | ||
| 'var(--tooltip-background-color, rgba(0, 0, 0, 0.7))' | ||
| TooltipReactiveController.tooltipContainer.style.padding = 'var(--tooltip-padding, 5px)' | ||
| TooltipReactiveController.tooltipContainer.style.borderRadius = 'var(--tooltip-border-radius, 3px)' | ||
| TooltipReactiveController.tooltipContainer.style.boxShadow = | ||
| 'var(--tooltip-box-shadow, 0 2px 10px rgba(0, 0, 0, 0.2))' | ||
| TooltipReactiveController.tooltipContainer.style.maxWidth = 'var(--tooltip-max-width, 300px)' | ||
| TooltipReactiveController.tooltipContainer.style.wordWrap = 'break-word' | ||
| TooltipReactiveController.tooltipContainer.style.whiteSpace = 'pre-wrap' | ||
| TooltipReactiveController.tooltipContainer.style.overflow = 'hidden' | ||
| document.body.appendChild(TooltipReactiveController.tooltipContainer) | ||
| } | ||
| } | ||
| /** | ||
| * Called when the host is connected to the DOM. Adds event listeners for mouseover and mouseout events. | ||
| */ | ||
| hostConnected() { | ||
@@ -46,5 +56,2 @@ const target = this.host.shadowRoot ?? this.host | ||
| /** | ||
| * Called when the host is disconnected from the DOM. Removes event listeners for mouseover and mouseout events. | ||
| */ | ||
| hostDisconnected() { | ||
@@ -56,37 +63,29 @@ const target = this.host.shadowRoot ?? this.host | ||
| /** | ||
| * Handles the mouseover event. Checks if the target element has the specified attribute and if it has overflow. | ||
| * If both conditions are met, sets the tooltip content and calculates its position. | ||
| * @param e - The mouseover event. | ||
| */ | ||
| private handleMouseOver = (e: Event) => { | ||
| const element = e.target as HTMLElement | ||
| if (element.hasAttribute(this.attributeName) && hasOverflow(element)) { | ||
| element.setAttribute( | ||
| 'data-tooltip', | ||
| const tooltipContent = | ||
| typeof this.content === 'function' | ||
| ? this.content.call(this, element) | ||
| : this.content || element.textContent?.trim() || '' | ||
| ) | ||
| const rect = element.getBoundingClientRect() | ||
| // Set CSS variables for position | ||
| element.style.setProperty('--tooltip-top', `${rect.top + rect.height}px`) | ||
| element.style.setProperty('--tooltip-left', `${rect.left}px`) | ||
| // Calculate the fixed position | ||
| const fixedTop = rect.top + rect.height | ||
| const fixedLeft = rect.left | ||
| // Set tooltip container position and content | ||
| TooltipReactiveController.tooltipContainer!.style.top = `${fixedTop}px` | ||
| TooltipReactiveController.tooltipContainer!.style.left = `${fixedLeft}px` | ||
| TooltipReactiveController.tooltipContainer!.style.display = 'block' | ||
| TooltipReactiveController.tooltipContainer!.textContent = tooltipContent | ||
| } | ||
| } | ||
| /** | ||
| * Handles the mouseout event. Removes the tooltip content and position properties from the target element. | ||
| * @param e - The mouseout event. | ||
| */ | ||
| private handleMouseOut = (e: Event) => { | ||
| const element = e.target as HTMLElement | ||
| if (element.hasAttribute('data-tooltip')) { | ||
| element.removeAttribute('data-tooltip') | ||
| element.style.removeProperty('--tooltip-top') | ||
| element.style.removeProperty('--tooltip-left') | ||
| if (TooltipReactiveController.tooltipContainer) { | ||
| TooltipReactiveController.tooltipContainer.style.display = 'none' | ||
| } | ||
| } | ||
| } |
Sorry, the diff of this file is not supported yet
No alert changes
Worsened metrics
- Total package byte prevSize
302599
-0.07%- Lines of code
3398
-0.85%No dependency changes