feat(OnyxTooltip): auto align tooltip

apps/demo-app/src/views/HomeView.vue

@@ -278,10 +278,37 @@ const currentPage = ref(1);
           label="Show toast"
           @click="toast.show({ headline: 'Example toast', color: 'success' })"
         />
-
-        <OnyxTooltip v-if="show('OnyxTooltip')" text="Example tooltip text">
-          Hover me to show tooltip
-        </OnyxTooltip>
+        <OnyxHeadline is="h2">Tooltip (auto alignment)</OnyxHeadline>
+
+        <div
+          :style="{
+            display: 'flex',
+            justifyContent: 'space-between',
+            width: '101%',
+            marginTop: '2rem',
+          }"
+        >
+          <OnyxTooltip v-if="show('OnyxTooltip')" text="Example tooltip text">
+            <template #default="{ trigger }">
+              <OnyxButton label="Left" v-bind="trigger" />
+            </template>
+          </OnyxTooltip>
+          <OnyxTooltip v-if="show('OnyxTooltip')" text="Example tooltip text">
+            <template #default="{ trigger }">
+              <OnyxButton label="Center" v-bind="trigger" />
+            </template>
+          </OnyxTooltip>
+          <OnyxTooltip v-if="show('OnyxTooltip')" text="Example tooltip text">
+            <template #default="{ trigger }">
+              <OnyxButton label="Center" v-bind="trigger" />
+            </template>
+          </OnyxTooltip>
+          <OnyxTooltip v-if="show('OnyxTooltip')" text="Example tooltip text">
+            <template #default="{ trigger }">
+              <OnyxButton label="Right" v-bind="trigger" />
+            </template>
+          </OnyxTooltip>
+        </div>
 
         <!-- Add new components alphabetically. -->
       </div>

packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.ct.tsx

@@ -125,7 +125,7 @@ test.describe("Screenshot tests", () => {
         <OnyxTooltip
           text={column === "long-text" ? "Lorem ipsum dolor sit amet ".repeat(3) : "Test tooltip"}
           color={row === "danger" ? "danger" : undefined}
-          position={row === "bottom" ? "bottom" : undefined}
+          position={row === "bottom" ? "bottom" : "top"}
           icon={row === "icon" ? mockPlaywrightIcon : undefined}
           fitParent={column === "fit-parent"}
           open={true}
@@ -167,3 +167,51 @@ test.describe("Screenshot tests", () => {
     },
   });
 });
+
+test.describe("Alignment screenshot tests", () => {
+  executeMatrixScreenshotTest({
+    name: "Aligned tooltip",
+    columns: ["left", "center", "right"],
+    rows: ["top", "bottom"],
+    component: (column, row) => {
+      return (
+        <OnyxTooltip text="Test tooltip" position={row} open={true} float={column}>
+          <span
+            style={{
+              fontFamily: "var(--onyx-font-family)",
+              color: "var(--onyx-color-text-icons-neutral-intense)",
+            }}
+          >
+            Here goes the slot content
+          </span>
+        </OnyxTooltip>
+      );
+    },
+    // set component size to fully include the tooltip
+    beforeScreenshot: async (component, page, column, row) => {
+      const tooltipSize = await component
+        .getByRole("tooltip")
+        .evaluate((element) => [element.clientHeight, element.clientWidth]);
+
+      // set paddings to fit the full tooltip in the screenshot
+      await component.evaluate(
+        (element, { tooltipSize: [height, width], row }) => {
+          const verticalPadding = `${height + 12}px`;
+
+          if (row === "bottom") {
+            element.style.paddingBottom = verticalPadding;
+            element.style.marginTop = "0px";
+          } else element.style.paddingTop = verticalPadding;
+
+          const widthDiff = width - element.clientWidth;
+          if (widthDiff > 0) {
+            const padding = `${widthDiff / 2 + 20}px`;
+            element.style.paddingLeft = padding;
+            element.style.paddingRight = padding;
+          }
+        },
+        { tooltipSize, row },
+      );
+    },
+  });
+});

packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.stories.ts

@@ -52,6 +52,10 @@ export const Default = {
       h(OnyxButton, { label: "Slot content goes here", ...(trigger as any) }),
     icon: circleInformation,
     open: true,
+    position: "auto",
+    color: "neutral",
+    float: "auto",
+    de,
   },
 } satisfies Story;
 

packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue

@@ -1,8 +1,19 @@
 <script lang="ts" setup>
 import { createToggletip, createTooltip } from "@sit-onyx/headless";
 import type { HTMLAttributes, MaybeRefOrGetter, Ref, VNode } from "vue";
-import { computed, ref, shallowRef, toValue, watch } from "vue";
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  toValue,
+  watch,
+} from "vue";
 import { useDensity } from "../../composables/density";
+import { useOpenDirection } from "../../composables/useOpenDirection";
+import { useWedgePosition } from "../../composables/useWedgePosition";
 import { injectI18n } from "../../i18n";
 import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import type { OnyxTooltipProps } from "./types";
@@ -22,9 +33,10 @@ type CreateTooltipOptions = {
 
 const props = withDefaults(defineProps<OnyxTooltipProps>(), {
   color: "neutral",
-  position: "top",
+  position: "auto",
   fitParent: false,
   open: "hover",
+  float: "auto",
 });
 
 defineSlots<{
@@ -69,6 +81,21 @@ const type = computed(() => {
   return "hover";
 });
 
+// classes for the tooltip | computed to drevent bugs
+const tooltipClasses = computed(() => {
+  return {
+    "onyx-tooltip--danger": props.color === "danger",
+    "onyx-tooltip--top": props.position === "top",
+    "onyx-tooltip--bottom": props.position === "bottom",
+    ["onyx-tooltip--" + openDirection]: props.position === "auto",
+    "onyx-tooltip--fit-parent": props.fitParent,
+    "onyx-tooltip--hidden": !isVisible.value,
+    "onyx-tooltip--float--left": props.float === "left",
+    "onyx-tooltip--float--right": props.float === "right",
+    ["onyx-tooltip--float--" + wedgePosition]: wedgePosition && props.float === "auto",
+  };
+});
+
 const createPattern = () =>
   type.value === "hover"
     ? createTooltip(tooltipOptions.value)
@@ -79,19 +106,44 @@ watch(type, () => (ariaPattern.value = createPattern()));
 
 const tooltip = computed(() => ariaPattern.value?.elements.tooltip);
 const trigger = computed(() => toValue<HTMLAttributes>(ariaPattern.value?.elements.trigger));
+
+const tooltipWrapperRef = ref<HTMLElement>();
+const tooltipRef = ref<HTMLElement>();
+const { openDirection, updateOpenDirection } = useOpenDirection(tooltipWrapperRef);
+const { wedgePosition, updateWedgePosition } = useWedgePosition(tooltipWrapperRef, tooltipRef);
+
+// update open direction on resize and to ensure the tooltip is always visible
+onMounted(() => {
+  const updateOnEvent = () => {
+    updateOpenDirection();
+    updateWedgePosition();
+  };
+
+  window.addEventListener("resize", updateOnEvent);
+
+  // initial update
+  updateOpenDirection();
+  updateWedgePosition();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updateOpenDirection);
+  window.removeEventListener("resize", updateWedgePosition);
+});
+// update open direction on visibliity changes ensure the tooltip is always visible
+watch(isVisible, async () => {
+  await nextTick();
+  updateOpenDirection();
+  updateWedgePosition();
+});
 </script>
 
 <template>
-  <div :class="['onyx-tooltip-wrapper', densityClass]">
+  <div ref="tooltipWrapperRef" :class="['onyx-tooltip-wrapper', densityClass]">
     <div
+      ref="tooltipRef"
       v-bind="tooltip"
-      class="onyx-tooltip onyx-text--small onyx-truncation-multiline"
-      :class="{
-        'onyx-tooltip--danger': props.color === 'danger',
-        'onyx-tooltip--bottom': props.position === 'bottom',
-        'onyx-tooltip--fit-parent': props.fitParent,
-        'onyx-tooltip--hidden': !isVisible,
-      }"
+      :class="['onyx-tooltip', 'onyx-text--small', 'onyx-truncation-multiline', tooltipClasses]"
     >
       <OnyxIcon v-if="props.icon" :icon="props.icon" size="16px" />
       <slot name="tooltip">{{ props.text }}</slot>
@@ -176,6 +228,25 @@ $wedge-size: 0.5rem;
         border-color: transparent transparent var(--background-color);
       }
     }
+
+    &--float {
+      &--left {
+        left: var(--wedge-size);
+        transform: translateX(0);
+
+        &::after {
+          left: 2 * $wedge-size;
+        }
+      }
+      &--right {
+        left: 100%;
+        transform: translateX(-100%);
+
+        &::after {
+          left: calc(100% - 2 * $wedge-size);
+        }
+      }
+    }
   }
 }
 

packages/sit-onyx/src/components/OnyxTooltip/types.ts

@@ -28,6 +28,10 @@ export type OnyxTooltipProps = DensityProp & {
    * How to position the tooltip relative to the parent element.
    */
   position?: TooltipPosition;
+  /**
+   * How to float the tooltip relative to the parent element.
+   */
+  float?: TooltipFloat;
   /**
    * If `true`, the tooltip will match the width of the parent/slot element.
    */
@@ -44,8 +48,10 @@ export type OnyxTooltipProps = DensityProp & {
   open?: TooltipOpen;
 };
 
-export const TOOLTIP_POSITIONS = ["top", "bottom"] as const;
+export const TOOLTIP_POSITIONS = ["top", "bottom", "auto"] as const;
 export type TooltipPosition = (typeof TOOLTIP_POSITIONS)[number];
+export const TOOLTIP_FLOAT = ["left", "right", "center", "auto"] as const;
+export type TooltipFloat = (typeof TOOLTIP_FLOAT)[number];
 
 export type TooltipOpen =
   | "hover"

packages/sit-onyx/src/composables/useOpenDirection.ts

@@ -17,7 +17,6 @@ export const useOpenDirection = (element: MaybeRef<Element | undefined>) => {
 
     const parentTop = overflowParentRect?.top ?? window.visualViewport?.pageTop ?? 0;
     const parentBottom = overflowParentRect?.bottom ?? window.visualViewport?.height ?? 0;
-
     const freeSpaceBelow = parentBottom - elementRect.bottom;
     const freeSpaceAbove = elementRect.top - parentTop;
 
@@ -31,7 +30,7 @@ export const useOpenDirection = (element: MaybeRef<Element | undefined>) => {
     if (!element) return undefined;
 
     const style = getComputedStyle(element);
-    if (style.overflow === "hidden") {
+    if (style.overflow === "hidden" || style.overflow === "hidden auto") {
       // if the element has hidden overflow, the flyout would be cut off by this element so we need to use
       // this element as parent to calculate the open direction instead of the body.
       return element;

packages/sit-onyx/src/composables/useWedgePosition.ts

@@ -0,0 +1,80 @@
+import { ref, unref, type MaybeRef } from "vue";
+
+export type WedgePosition = "center" | "left" | "right";
+
+export const useWedgePosition = (
+  element: MaybeRef<Element | undefined>,
+  tooltipElement: MaybeRef<Element | undefined>,
+) => {
+  const minMargin = 16;
+  const wedgePosition = ref<WedgePosition>("center");
+
+  const updateWedgePosition = () => {
+    const wrapperEl = unref(element);
+    const tooltipEl = unref(tooltipElement);
+
+    if (!wrapperEl || !tooltipEl) {
+      wedgePosition.value = "center";
+      return;
+    }
+
+    const overflowParentRect = findParentWithHiddenOverflow(wrapperEl)?.getBoundingClientRect();
+    const wrapperRect = wrapperEl.getBoundingClientRect();
+    const tooltipElementRect = tooltipEl.getBoundingClientRect();
+
+    if (tooltipElementRect.width < wrapperRect.width) {
+      wedgePosition.value = "center";
+      return;
+    }
+
+    const minSpace = (tooltipElementRect.width - wrapperRect.width + minMargin * 2) / 2;
+
+    const parentLeft = overflowParentRect?.left ?? window.visualViewport?.pageLeft ?? 0;
+    const parentRight =
+      overflowParentRect?.right ??
+      (window.visualViewport?.width ?? window.innerWidth) +
+        (window.visualViewport?.offsetLeft ?? 0) ??
+      0;
+
+    const freeSpaceLeft = wrapperRect.left - parentLeft;
+    const freeSpaceRight = parentRight - wrapperRect.right;
+
+    const enoughSpaceLeft = freeSpaceLeft >= minSpace;
+    const enoughSpaceRight = freeSpaceRight >= minSpace;
+
+    wedgePosition.value =
+      enoughSpaceLeft === enoughSpaceRight
+        ? "center"
+        : freeSpaceLeft > freeSpaceRight
+          ? "right"
+          : "left";
+  };
+
+  /**
+   * Recursively finds the first parent element with hidden overflow.
+   */
+  const findParentWithHiddenOverflow = (element?: Element): Element | undefined => {
+    if (!element) return undefined;
+
+    const style = getComputedStyle(element);
+    if (style.overflow === "hidden" || style.overflow === "hidden auto") {
+      // if the element has hidden overflow, the flyout would be cut off by this element so we need to use
+      // this element as parent to calculate the open direction instead of the body.
+      return element;
+    }
+
+    return element.parentElement ? findParentWithHiddenOverflow(element.parentElement) : undefined;
+  };
+
+  return {
+    /**
+     * Direction in which the flyout etc. should open to.
+     */
+    wedgePosition,
+    /**
+     * Detects in which direction a flyout etc. should be opened, depending on the available space in each direction.
+     * Should only be called onBeforeMount or later to support server side rendering.
+     */
+    updateWedgePosition,
+  };
+};