fix(tooltip): tooltip persists issue (#11324)

* fix(tooltip): tooltip persists issue * chore(prettier): format code --------- Co-authored-by: kennylam <[email protected]>
carbon-design-system · Jan 11, 2024 · d355535 · d355535
1 parent 978521a
commit d355535
Showing 1 changed file with 10 additions and 2 deletions.
diff --git 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;