bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-10 13:40:06 +00:00
Code Issues Releases Wiki Activity

Feat(tooltip): Add showTooltipOnFocus input to TooltipDirective

Browse Source
This commit is contained in:
Stephon Brown
2026-02-03 16:22:04 -05:00
parent cd83d6ae3b
commit 02f62bc0fd
2 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
libs/components/src/icon-button/icon-button.component.ts
View File

@@ -112,7 +112,7 @@ const sizes: Record<IconButtonSize, string[]> = {
},
hostDirectives: [
AriaDisableDirective,
{ directive: TooltipDirective, inputs: ["tooltipPosition"] },
{ directive: TooltipDirective, inputs: ["tooltipPosition", "showTooltipOnFocus"] },
],
})
export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableElement {

14
libs/components/src/tooltip/tooltip.directive.ts
View File

@@ -28,7 +28,7 @@ export const TOOLTIP_DELAY_MS = 800;
host: {
"(mouseenter)": "showTooltip()",
"(mouseleave)": "hideTooltip()",
"(focus)": "showTooltip()",
"(focus)": "handleFocus()",
"(blur)": "hideTooltip()",
"[attr.aria-describedby]": "resolvedDescribedByIds()",
},
@@ -50,6 +50,12 @@ export class TooltipDirective implements OnInit, OnDestroy {
*/
readonly addTooltipToDescribedby = input<boolean>(false);
/**
* Controls whether the tooltip should be shown on focus events.
* @default true
*/
readonly showTooltipOnFocus = input<boolean>(true);
private readonly isVisible = signal(false);
private overlayRef: OverlayRef | undefined;
private showTimeoutId: ReturnType<typeof setTimeout> | undefined;
@@ -121,6 +127,12 @@ export class TooltipDirective implements OnInit, OnDestroy {
}, TOOLTIP_DELAY_MS);
};
protected handleFocus = () => {
if (this.showTooltipOnFocus()) {
this.showTooltip();
}
};
protected hideTooltip = () => {
this.destroyTooltip();
};