diff --git a/src/tooltip/definition-tooptip.component.ts b/src/tooltip/definition-tooptip.component.ts index 04286d063e..4921c4ee2d 100644 --- a/src/tooltip/definition-tooptip.component.ts +++ b/src/tooltip/definition-tooptip.component.ts @@ -28,6 +28,7 @@ import { PopoverContainer } from "carbon-components-angular/popover"; class="cds--definition-term" [attr.aria-controls]="id" [attr.aria-expanded]="isOpen" + [attr.aria-describedby]="isOpen ? id : null" (blur)="onBlur($event)" (click)="onClick($event)" type="button"> @@ -37,9 +38,9 @@ import { PopoverContainer } from "carbon-components-angular/popover"; *ngIf="description" class="cds--popover" [id]="id" - [attr.aria-hidden]="isOpen" + [attr.aria-hidden]="!isOpen" role="tooltip"> - + {{description}} @@ -62,6 +63,8 @@ export class TooltipDefinition extends PopoverContainer { */ @Input() templateContext: any; + @Input() openOnHover = false; + constructor( protected elementRef: ElementRef, protected ngZone: NgZone, @@ -94,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; } diff --git a/src/tooltip/definition-tooptip.stories.ts b/src/tooltip/definition-tooptip.stories.ts index 55603faa4a..db117b5469 100644 --- a/src/tooltip/definition-tooptip.stories.ts +++ b/src/tooltip/definition-tooptip.stories.ts @@ -62,6 +62,7 @@ const Template = (args) => ({

Custom domains direct requests for your apps in this Cloud Foundry organization to a ({

Custom domains direct requests for your apps in this Cloud Foundry organization to a