From 02f62bc0fdafa00753b03691adeb25b9fb674d25 Mon Sep 17 00:00:00 2001 From: Stephon Brown Date: Tue, 3 Feb 2026 16:22:04 -0500 Subject: [PATCH] Feat(tooltip): Add `showTooltipOnFocus` input to TooltipDirective --- .../src/icon-button/icon-button.component.ts | 2 +- libs/components/src/tooltip/tooltip.directive.ts | 14 +++++++++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/libs/components/src/icon-button/icon-button.component.ts b/libs/components/src/icon-button/icon-button.component.ts index 3b5e01132a2..d1a5f14d1cc 100644 --- a/libs/components/src/icon-button/icon-button.component.ts +++ b/libs/components/src/icon-button/icon-button.component.ts @@ -112,7 +112,7 @@ const sizes: Record = { }, hostDirectives: [ AriaDisableDirective, - { directive: TooltipDirective, inputs: ["tooltipPosition"] }, + { directive: TooltipDirective, inputs: ["tooltipPosition", "showTooltipOnFocus"] }, ], }) export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableElement { diff --git a/libs/components/src/tooltip/tooltip.directive.ts b/libs/components/src/tooltip/tooltip.directive.ts index 419b503c911..0e2610b53ff 100644 --- a/libs/components/src/tooltip/tooltip.directive.ts +++ b/libs/components/src/tooltip/tooltip.directive.ts @@ -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(false); + /** + * Controls whether the tooltip should be shown on focus events. + * @default true + */ + readonly showTooltipOnFocus = input(true); + private readonly isVisible = signal(false); private overlayRef: OverlayRef | undefined; private showTimeoutId: ReturnType | 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(); };