fix(tooltip): flickering & review

Signed-off-by: Alexandre Esteves <[email protected]>
ovh · Jan 3, 2025 · e77bdfa · e77bdfa
1 parent 4587aaf
commit e77bdfa
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 40 deletions.
diff --git a/packages/ods/src/components/tooltip/src/components/ods-tooltip/ods-tooltip.tsx b/packages/ods/src/components/tooltip/src/components/ods-tooltip/ods-tooltip.tsx
@@ -12,16 +12,19 @@ export class OdsTooltip {
   private arrowElement?: HTMLElement;
   private triggerElement?: HTMLElement | null;
   private isTooltipHover: boolean = false;
+  private timer?: NodeJS.Timeout;
   private cleanUpCallback: () => void = () => {};
   private boundHide = this.hide.bind(this);
   private boundShow = this.show.bind(this);
+  private boundShowOnTooltip = this.showOnElEnter.bind(this);
+  private boundHideOnTooltip = this.hideOnElLeave.bind(this);
+  private boundLeaveTrigger = this.leaveTrigger.bind(this);
 
   @Element() el!: HTMLElement;
 
   @Prop({ reflect: true }) public position: OdsTooltipPosition = ODS_TOOLTIP_POSITION.top;
   @Prop({ reflect: true }) public shadowDomTriggerId?: string;
   @Prop({ reflect: true }) public strategy: OdsTooltipStrategy = ODS_TOOLTIP_STRATEGY.absolute;
-  @Prop({ reflect: true }) public tooltipId?: string;
   @Prop({ reflect: true }) public triggerId!: string;
   @Prop({ reflect: true }) public withArrow: boolean = false;
 
@@ -30,16 +33,14 @@ export class OdsTooltip {
 
   @Method()
   public async hide(): Promise<void> {
-    if (this.isTooltipHover) {
-      return;
-    }
     hideOverlay(this.el, this.cleanUpCallback);
 
     this.odsHide.emit();
   }
 
   @Method()
   public async show(): Promise<void> {
+    clearTimeout(this.timer);
     this.cleanUpCallback = showOverlay(this.position, {
       arrow: this.arrowElement,
       popper: this.el,
@@ -59,37 +60,45 @@ export class OdsTooltip {
     this.triggerElement?.addEventListener('blur', this.boundHide);
     this.triggerElement?.addEventListener('focus', this.boundShow);
     this.triggerElement?.addEventListener('mouseenter', this.boundShow);
-    this.triggerElement?.addEventListener('mouseleave', () => setTimeout(this.boundHide, 50));
-    this.el.addEventListener('mouseenter', () => {
-      this.isTooltipHover = true;
-      return this.boundShow();
-    });
-    this.el.addEventListener('mouseleave', () => {
-      this.isTooltipHover = false ;
-      return this.boundHide();
-    });
-
+    this.triggerElement?.addEventListener('mouseleave', this.boundLeaveTrigger);
+    this.el.addEventListener('mouseenter', this.boundShowOnTooltip);
+    this.el.addEventListener('mouseleave', this.boundHideOnTooltip);
   }
 
   disconnectedCallback() : void {
     this.triggerElement?.removeEventListener('blur', this.boundHide);
     this.triggerElement?.removeEventListener('focus', this.boundShow);
     this.triggerElement?.removeEventListener('mouseenter', this.boundShow);
-    this.triggerElement?.removeEventListener('mouseleave', this.boundHide);
-    this.el.removeEventListener('mouseenter', () => {
-      this.isTooltipHover = true;
-      return this.boundShow();
-    });
-    this.el.removeEventListener('mouseleave', () => {
-      this.isTooltipHover = false ;
-      return this.boundHide();
-    });
+    this.triggerElement?.removeEventListener('mouseleave', this.boundLeaveTrigger);
+    this.el.removeEventListener('mouseenter', this.boundShowOnTooltip);
+    this.el.removeEventListener('mouseleave', this.boundHideOnTooltip);
+  }
+
+  private leaveTrigger(): void {
+    setTimeout(() => this.hideByTooltipHover(), 50);
+  }
+
+  private showOnElEnter(): Promise<void> {
+    this.isTooltipHover = true;
+    return this.boundShow();
+  }
+
+  private hideOnElLeave(): void {
+    this.isTooltipHover = false;
+    this.timer = setTimeout(() => this.hideByTooltipHover(), 50);
+  }
+
+  private async hideByTooltipHover(): Promise<void> {
+    if (this.isTooltipHover) {
+      return;
+    }
+    return this.hide();
   }
 
   render(): FunctionalComponent {
     return (
       <Host
-        id={ this.tooltipId }
+        id={ this.el.id }
         class={ `ods-tooltip ods-tooltip--${this.strategy}` }
         role="tooltip">
         <slot></slot>

diff --git a/packages/ods/src/components/tooltip/tests/navigation/ods-tooltip.e2e.ts b/packages/ods/src/components/tooltip/tests/navigation/ods-tooltip.e2e.ts
@@ -84,6 +84,7 @@ describe('ods-tooltip navigation', () => {
 
     await notTrigger.hover();
     await page.waitForChanges();
+    await new Promise((resolve) => setTimeout(resolve, 100));
 
     expect(await isTooltipVisible()).toBe(false);
   });

diff --git a/packages/ods/src/components/tooltip/tests/rendering/ods-tooltip.spec.ts b/packages/ods/src/components/tooltip/tests/rendering/ods-tooltip.spec.ts
@@ -66,22 +66,6 @@ describe('ods-tooltip rendering', () => {
     });
   });
 
-  describe('tooltipId', () => {
-    it('should be reflected', async() => {
-      const dummyValue = 'dummy value';
-
-      await setup(`<ods-tooltip tooltip-id="${dummyValue}"></ods-tooltip>`);
-
-      expect(root?.getAttribute('tooltip-id')).toBe(dummyValue);
-    });
-
-    it('should render with expected default value', async() => {
-      await setup('<ods-tooltip></ods-tooltip>');
-
-      expect(root?.getAttribute('tooltip-id')).toBeNull();
-    });
-  });
-
   describe('triggerId', () => {
     it('should be reflected', async() => {
       const dummyValue = 'dummy value';