[CL-227] Tooltip component (#16442)

* add tooltip component * fix typescript errors * fix more typescript errors * remove css comments * fix tooltip blocking mouse events * move default position logic to shared util * fix tooltip stories options * add tooltip spec * add offset arg to default positions * add shadow to tooltip * increase offset * adding max width * fix disabled button cursor * add stronger position type * fixing types * change get positions function to type return correctly * more fixing types * default options object * add mock to tooltip stories * add figma link to story * update positions file name. remove getter * remove standalone. add comment about component use * add jsdoc comment to directive inputs * fix typo * remove instances of setInput * fix storybook injection error * remove unneeded functions * remove unneeded variables * remove comment * move popover positions back with component * fix popover i18n mock * creat etooltip positions file * update test to account for change to setInput calls * remove panel class as it's not necessary * improve tooltip docs page * use classes for styling. Simpliy position changes * simplify tests. No longer need to track position changes * move comment to correct place * fix typos * remove unnecessary standalone declaration
2025-12-15 07:43:35 +00:00 · 2025-10-01 14:01:53 -04:00
parent de3759fa85
commit 08a022fa52
12 changed files with 644 additions and 1 deletions
--- a/libs/components/src/tooltip/tooltip.component.css
+++ b/libs/components/src/tooltip/tooltip.component.css
@@ -0,0 +1,132 @@
+:root {
+  --tooltip-shadow: rgb(0 0 0 / 0.1);
+}
+
+.cdk-overlay-pane:has(.bit-tooltip[data-visible="false"]) {
+  pointer-events: none;
+}
+
+.bit-tooltip-container {
+  position: relative;
+  max-width: 12rem;
+  opacity: 0;
+  width: max-content;
+  box-shadow:
+    0 4px 6px -1px var(--tooltip-shadow),
+    0 2px 4px -2px var(--tooltip-shadow);
+  border-radius: 0.75rem;
+  transition:
+    transform 100ms ease-in-out,
+    opacity 100ms ease-in-out;
+  transform: scale(0.95);
+  z-index: 1;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    width: 1rem;
+    height: 1rem;
+    z-index: 1;
+    rotate: 45deg;
+    border-radius: 3px;
+  }
+
+  &::before {
+    background: linear-gradient(135deg, transparent 50%, rgb(var(--color-text-main)) 50%);
+    z-index: -1;
+  }
+
+  &::after {
+    background: rgb(var(--color-text-main));
+    z-index: -1;
+  }
+
+  &[data-visible="true"] {
+    opacity: 1;
+    transform: scale(1);
+    z-index: 1000;
+  }
+
+  .bit-tooltip-above-center &,
+  .bit-tooltip-below-center & {
+    &::before,
+    &::after {
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+      transform-origin: left;
+    }
+  }
+
+  .bit-tooltip-above-center & {
+    &::after {
+      filter: drop-shadow(0 3px 5px var(--tooltip-shadow))
+        drop-shadow(0 1px 3px var(--tooltip-shadow));
+    }
+
+    &::before,
+    &::after {
+      inset-block-end: -0.25rem;
+    }
+  }
+
+  .bit-tooltip-below-center & {
+    &::after {
+      display: none;
+    }
+
+    &::after,
+    &::before {
+      inset-block-start: -0.25rem;
+      rotate: -135deg;
+    }
+  }
+
+  .bit-tooltip-left-center &,
+  .bit-tooltip-right-center & {
+    &::after,
+    &::before {
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+      transform-origin: top;
+    }
+  }
+
+  .bit-tooltip-left-center & {
+    &::after {
+      filter: drop-shadow(-3px 1px 3px var(--tooltip-shadow))
+        drop-shadow(-1px 2px 3px var(--tooltip-shadow));
+    }
+
+    &::after,
+    &::before {
+      inset-inline-end: -0.25rem;
+      rotate: -45deg;
+    }
+  }
+
+  .bit-tooltip-right-center & {
+    &::after {
+      filter: drop-shadow(2px -4px 2px var(--tooltip-shadow))
+        drop-shadow(0 -1px 3px var(--tooltip-shadow));
+    }
+
+    &::after,
+    &::before {
+      inset-inline-start: -0.25rem;
+      rotate: 135deg;
+    }
+  }
+}
+
+.bit-tooltip {
+  width: max-content;
+  max-width: 12rem;
+  background-color: rgb(var(--color-text-main));
+  color: rgb(var(--color-text-contrast));
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  z-index: 2;
+}