Add tooltip to icon button to display label

Author: BryanCunningham

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

@@ -1,5 +1,6 @@
 import { NgClass } from "@angular/common";
 import {
+  ChangeDetectorRef,
   Component,
   computed,
   effect,
@@ -17,6 +18,7 @@ import { setA11yTitleAndAriaLabel } from "../a11y/set-a11y-title-and-aria-label"
 import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
 import { FocusableElement } from "../shared/focusable-element";
 import { SpinnerComponent } from "../spinner";
+import { TooltipDirective } from "../tooltip";
 import { ariaDisableElement } from "../utils";
 
 export type IconButtonType = "primary" | "danger" | "contrast" | "main" | "muted" | "nav-contrast";
@@ -98,7 +100,10 @@ const sizes: Record<IconButtonSize, string[]> = {
      */
     "[attr.bitIconButton]": "icon()",
   },
-  hostDirectives: [AriaDisableDirective],
+  hostDirectives: [
+    AriaDisableDirective,
+    { directive: TooltipDirective, inputs: ["tooltipPosition"] },
+  ],
 })
 export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableElement {
   readonly icon = model.required<string>({ alias: "bitIconButton" });
@@ -107,6 +112,10 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
 
   readonly size = model<IconButtonSize>("default");
 
+  private readonly cdr = inject(ChangeDetectorRef);
+  private elementRef = inject(ElementRef);
+  private tooltip = inject(TooltipDirective, { host: true, optional: true });
+
   /**
    * label input will be used to set the `aria-label` attributes on the button.
    * This is for accessibility purposes, as it provides a text alternative for the icon button.
@@ -184,8 +193,6 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
     return this.elementRef.nativeElement;
   }
 
-  private elementRef = inject(ElementRef);
-
   constructor() {
     const element = this.elementRef.nativeElement;
 
@@ -196,9 +203,11 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
     effect(() => {
       setA11yTitleAndAriaLabel({
         element: this.elementRef.nativeElement,
-        title: originalTitle ?? this.label(),
+        title: null,
         label: this.label(),
       });
+
+      this.tooltip?.setContent(originalTitle || this.label());
     });
   }
 }

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

@@ -32,13 +32,14 @@ export class TooltipDirective implements OnInit {
   /**
    * The value of this input is forwarded to the tooltip.component to render
    */
-  readonly bitTooltip = input.required<string>();
+  readonly bitTooltip = input<string>();
   /**
    * The value of this input is forwarded to the tooltip.component to set its position explicitly.
    * @default "above-center"
    */
   readonly tooltipPosition = input<TooltipPositionIdentifier>("above-center");
 
+  private _bitTooltip = signal("");
   private isVisible = signal(false);
   private overlayRef: OverlayRef | undefined;
   private elementRef = inject(ElementRef);
@@ -59,7 +60,7 @@ export class TooltipDirective implements OnInit {
         {
           provide: TOOLTIP_DATA,
           useValue: {
-            content: this.bitTooltip,
+            content: this._bitTooltip,
             isVisible: this.isVisible,
             tooltipPosition: this.tooltipPosition,
           },
@@ -89,6 +90,10 @@ export class TooltipDirective implements OnInit {
     };
   }
 
+  setContent(text: string) {
+    this._bitTooltip.set(text);
+  }
+
   ngOnInit() {
     this.positionStrategy.withPositions(this.computePositions(this.tooltipPosition()));
 

libs/components/src/tooltip/tooltip.stories.ts

@@ -72,7 +72,6 @@ type Story = StoryObj<TooltipDirective>;
 
 export const Default: Story = {
   args: {
-    bitTooltip: "This is a tooltip",
     tooltipPosition: "above-center",
   },
   render: (args) => ({
@@ -81,6 +80,7 @@ export const Default: Story = {
       <div class="tw-p-4">
         <button
           bitIconButton="bwi-ellipsis-v"
+          label="This is a tooltip"
           ${formatArgsForCodeSnippet<TooltipDirective>(args)}
         >
           Button label here
@@ -102,22 +102,22 @@ export const AllPositions: Story = {
       <div class="tw-p-16 tw-grid tw-grid-cols-2 tw-gap-8 tw-place-items-center">
         <button
           bitIconButton="bwi-angle-up"
-          bitTooltip="Top tooltip"
+          label="Top tooltip"
           tooltipPosition="above-center"
         ></button>
         <button
           bitIconButton="bwi-angle-right"
-          bitTooltip="Right tooltip"
+          label="Right tooltip"
           tooltipPosition="right-center"
         ></button>
         <button
           bitIconButton="bwi-angle-left"
-          bitTooltip="Left tooltip"
+          label="Left tooltip"
           tooltipPosition="left-center"
         ></button>
         <button
           bitIconButton="bwi-angle-down"
-          bitTooltip="Bottom tooltip"
+          label="Bottom tooltip"
           tooltipPosition="below-center"
         ></button>
       </div>
@@ -131,7 +131,7 @@ export const LongContent: Story = {
       <div class="tw-p-16 tw-flex tw-items-center tw-justify-center">
         <button
           bitIconButton="bwi-ellipsis-v"
-          bitTooltip="This is a very long tooltip that will wrap to multiple lines to demonstrate how the tooltip handles long content. This is not recommended for usability."
+          label="This is a very long tooltip that will wrap to multiple lines to demonstrate how the tooltip handles long content. This is not recommended for usability."
         ></button>
       </div>
     `,
@@ -144,7 +144,7 @@ export const OnDisabledButton: Story = {
       <div class="tw-p-16 tw-flex tw-items-center tw-justify-center">
         <button
           bitIconButton="bwi-ellipsis-v"
-          bitTooltip="Tooltip on disabled button"
+          label="Tooltip on disabled button"
           [disabled]="true"
         ></button>
       </div>