Merge branch 'issue.2861' of https://github.com/Akshat55/carbon-components-angular into issue.2861

Author: Akshat55

src/tooltip/tooltip.component.ts

@@ -76,6 +76,8 @@ export class Tooltip extends PopoverContainer implements AfterContentChecked {
 
 	@ViewChild("contentWrapper") wrapper: ElementRef<HTMLSpanElement>;
 
+	private timeoutId: any; // it should be number, but setTimeout below is matching the NodeJs type instead of the JS type
+
 	constructor(
 		protected elementRef: ElementRef,
 		protected ngZone: NgZone,
@@ -89,14 +91,20 @@ export class Tooltip extends PopoverContainer implements AfterContentChecked {
 
 	@HostListener("mouseenter", ["$event"])
 	mouseenter(event) {
-		setTimeout(() => {
+		// If a mouseleave is triggered before the tooltip is displayed (before setTimeout of mouseenter completes)
+		// we trigger the mouseleave only avoiding having to unecessary show the tooltip
+		clearTimeout(this.timeoutId);
+		this.timeoutId = setTimeout(() => {
 			this.handleChange(true, event);
 		}, this.enterDelayMs);
 	}
 
 	@HostListener("mouseleave", ["$event"])
 	mouseleave(event) {
-		setTimeout(() => {
+		// If a mouseleave is triggered before the tooltip is displayed (before setTimeout of mouseenter completes)
+		// we trigger the mouseleave only avoiding having to unecessary show the tooltip
+		clearTimeout(this.timeoutId);
+		this.timeoutId = setTimeout(() => {
 			this.handleChange(false, event);
 		}, this.leaveDelayMs);
 	}