[CL-879] use tooltip on icon button (#16576)

* Add tooltip to icon button to display label

* remove legacy cdr variable

* create overlay on focus or hover

* attach describdedby ids

* fix type errors

* remove aria-describedby when not necessary

* fix failing tests

* implement Claude feedback

* fixing broken specs

* remove host attr binding

* Simplify directive aria logic

* Move id to statis number

* do not render empty tooltip

* pass id to tooltip component

* remove pointer-events none to allow tooltip on normal buttons

* exclude some tooltip stories

* change describedby input name

* add story with tooltip on regular button

* enhanced tooltip docs

* set model directly

* change model to input

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="Your tooltip content here"
           ${formatArgsForCodeSnippet<TooltipDirective>(args)}
         >
           Button label here
@@ -98,26 +98,29 @@ export const Default: Story = {
 
 export const AllPositions: Story = {
   render: () => ({
+    parameters: {
+      chromatic: { disableSnapshot: true },
+    },
     template: `
       <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>
@@ -127,11 +130,14 @@ export const AllPositions: Story = {
 
 export const LongContent: Story = {
   render: () => ({
+    parameters: {
+      chromatic: { disableSnapshot: true },
+    },
     template: `
       <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>
     `,
@@ -140,14 +146,34 @@ export const LongContent: Story = {
 
 export const OnDisabledButton: Story = {
   render: () => ({
+    parameters: {
+      chromatic: { disableSnapshot: true },
+    },
     template: `
       <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>
     `,
   }),
 };
+
+export const OnNonIconButton: Story = {
+  render: () => ({
+    parameters: {
+      chromatic: { disableSnapshot: true },
+    },
+    template: `
+      <div class="tw-p-16 tw-flex tw-items-center tw-justify-center">
+        <button
+          bitButton
+          addTooltipToDescribedby="true"
+          bitTooltip="Some additional tooltip text to describe the button"
+        >Button label</button>
+      </div>
+    `,
+  }),
+};