From d35553594e84406878f3b8a21489bb6b66faaa7e Mon Sep 17 00:00:00 2001 From: Sangeetha Babu Date: Thu, 11 Jan 2024 18:23:01 +0530 Subject: [PATCH] fix(tooltip): tooltip persists issue (#11324) * fix(tooltip): tooltip persists issue * chore(prettier): format code --------- Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> --- .../src/components/tooltip/tooltip.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip.ts b/packages/carbon-web-components/src/components/tooltip/tooltip.ts index 209aed62203..0f5e0e14096 100644 --- a/packages/carbon-web-components/src/components/tooltip/tooltip.ts +++ b/packages/carbon-web-components/src/components/tooltip/tooltip.ts @@ -67,6 +67,12 @@ class CDSTooltip extends HostListenerMixin(CDSPopover) { @property({ reflect: true }) size = false; + /** + * Specify the timeout reference for the tooltip + */ + @property({ reflect: true }) + timeoutId = 0; + /** * Specify whether the tooltip should be open when it first renders */ @@ -77,7 +83,8 @@ class CDSTooltip extends HostListenerMixin(CDSPopover) { * Handles `mouseover` event on this element. */ private _handleHover = async () => { - setTimeout(async () => { + window.clearTimeout(this.timeoutId); + this.timeoutId = window.setTimeout(async () => { this.open = true; const { open, updateComplete } = this; if (open) { @@ -93,7 +100,8 @@ class CDSTooltip extends HostListenerMixin(CDSPopover) { * Handles `mouseleave` event on this element. */ private _handleHoverOut = async () => { - setTimeout(async () => { + window.clearTimeout(this.timeoutId); + this.timeoutId = window.setTimeout(async () => { const { open } = this; if (open) { this.open = false;