feat: allow definition tooltip to be opened on hover

Signed-off-by: Akshat Patel <[email protected]>

Author: Akshat55

src/tooltip/definition-tooptip.component.ts

@@ -30,9 +30,7 @@ import { PopoverContainer } from "carbon-components-angular/popover";
 			[attr.aria-expanded]="isOpen"
 			[attr.aria-describedby]="isOpen ? id : null"
 			(blur)="onBlur($event)"
-			(focus)="onClick($event)"
-			(mouseover)="onClick($event)"
-			(click)="onClick($event)"
+			(mousedown)="onClick($event)"
 			type="button">
 			<ng-content></ng-content>
 		</button>
@@ -65,6 +63,8 @@ export class TooltipDefinition extends PopoverContainer {
 	 */
 	@Input() templateContext: any;
 
+	@Input() openOnHover = false;
+
 	constructor(
 		protected elementRef: ElementRef,
 		protected ngZone: NgZone,
@@ -97,6 +97,18 @@ export class TooltipDefinition extends PopoverContainer {
 		this.handleChange(false, event);
 	}
 
+	@HostListener("mouseenter", ["$event"])
+	mouseenter(event) {
+		if (this.openOnHover) {
+			this.handleChange(true, event);
+		}
+	}
+
+	@HostListener("focusin", ["$event"])
+	onFocus(event) {
+		this.handleChange(true, event);
+	}
+
 	public isTemplate(value) {
 		return value instanceof TemplateRef;
 	}

src/tooltip/definition-tooptip.stories.ts

@@ -62,6 +62,7 @@ const Template = (args) => ({
 				<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a
 				<cds-tooltip-definition
 					[isOpen]="isOpen"
+					[openOnHover]="openOnHover"
 					[caret]="caret"
 					[align]="align"
 					(onOpen)="onOpen($event)"
@@ -101,6 +102,7 @@ const AutoAlignTemplate = (args) => ({
 				<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a
 				<cds-tooltip-definition
 					[isOpen]="isOpen"
+					[openOnHover]="openOnHover"
 					[caret]="caret"
 					[align]="align"
 					[autoAlign]="true"