Feat(tooltip): Add `showTooltipOnFocus` input to TooltipDirective

libs/components/src/icon-button/icon-button.component.ts

@@ -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 {

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<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();
   };