[CL-910] Use tooltip in title directive (#17084)

* use tooltip in a11y directive

* remove commented code

* add deprecation warning to appA11yTitle directive

* use label for tooltip in carousel nav

* wait for timeout before assertion

* remove unnecessary title directive use

* fix private variable lint errors

* increase tooltip show delay

* fix spec delay and export as constant

* use delay constant

---------

Co-authored-by: Vicki League <vleague@bitwarden.com>

libs/components/src/tooltip/tooltip.directive.ts

@@ -16,6 +16,7 @@ import {
 import { TooltipPositionIdentifier, tooltipPositions } from "./tooltip-positions";
 import { TooltipComponent, TOOLTIP_DATA } from "./tooltip.component";
 
+export const TOOLTIP_DELAY_MS = 800;
 /**
  * Directive to add a tooltip to any element. The tooltip content is provided via the `bitTooltip` input.
  * The position of the tooltip can be set via the `tooltipPosition` input. Default position is "above-center".
@@ -85,7 +86,7 @@ export class TooltipDirective implements OnInit {
     this.isVisible.set(false);
   };
 
-  private showTooltip = () => {
+  protected showTooltip = () => {
     if (!this.overlayRef) {
       this.overlayRef = this.overlay.create({
         ...this.defaultPopoverConfig,
@@ -94,14 +95,17 @@ export class TooltipDirective implements OnInit {
 
       this.overlayRef.attach(this.tooltipPortal);
     }
-    this.isVisible.set(true);
+
+    setTimeout(() => {
+      this.isVisible.set(true);
+    }, TOOLTIP_DELAY_MS);
   };
 
-  private hideTooltip = () => {
+  protected hideTooltip = () => {
     this.destroyTooltip();
   };
 
-  private readonly resolvedDescribedByIds = computed(() => {
+  protected readonly resolvedDescribedByIds = computed(() => {
     if (this.addTooltipToDescribedby()) {
       if (this.currentDescribedByIds) {
         return `${this.currentDescribedByIds || ""} ${this.tooltipId}`;