From 89e3ac0f9729e17f95578c9e420071855c83e631 Mon Sep 17 00:00:00 2001
From: Valerian Saliou <valerian@valeriansaliou.name>
Date: Sun, 23 Jun 2024 22:56:04 +0200
Subject: [PATCH] fix: rework how tooltips work so that they do not overflow
 their parents anymore

---
 src/components/base/BaseTooltip.vue        | 136 ++-----------
 src/components/base/BaseTooltipOverlay.vue | 226 +++++++++++++++++++++
 2 files changed, 246 insertions(+), 116 deletions(-)
 create mode 100644 src/components/base/BaseTooltipOverlay.vue

diff --git a/src/components/base/BaseTooltip.vue b/src/components/base/BaseTooltip.vue
index e3aeb2ed..2f5a3054 100644
--- a/src/components/base/BaseTooltip.vue
+++ b/src/components/base/BaseTooltip.vue
@@ -9,31 +9,19 @@
      ********************************************************************** -->
 
 <template lang="pug">
-div(
+.c-base-tooltip(
   @mouseenter="onMouseEnter"
   @mouseleave="onMouseLeave"
-  :class=`[
-    "c-base-tooltip",
-    "c-base-tooltip--" + direction,
-    "c-base-tooltip--" + align,
-    {
-      "c-base-tooltip--visible": isVisible
-    }
-  ]`
+  ref="root"
 )
-  .c-base-tooltip__overlay(
-    v-if="isInserted && !bypassed"
+  base-tooltip-overlay(
+    v-if="isVisible && !bypassed"
+    :value="tooltip"
+    :align="align"
+    :direction="direction"
+    :anchor="overlayAnchor"
+    :origin="overlayOrigin"
   )
-    span.c-base-tooltip__value
-      template(
-        v-if="tooltip"
-      )
-        | {{ tooltip }}
-
-      slot(
-        v-else
-        name="tooltip"
-      )
 
   .c-base-tooltip__wrapped(
     @click="onWrappedClick"
@@ -62,7 +50,7 @@ export default {
   props: {
     tooltip: {
       type: String,
-      default: null
+      required: true
     },
 
     align: {
@@ -109,8 +97,10 @@ export default {
       autoHideTimeout: null as null | ReturnType<typeof setTimeout>,
       mouseEnterApplyTimeout: null as null | ReturnType<typeof setTimeout>,
 
-      isInserted: false,
-      isVisible: false
+      isVisible: false,
+
+      overlayAnchor: [0, 0],
+      overlayOrigin: [0, 0]
     };
   },
 
@@ -130,10 +120,12 @@ export default {
 
       // Now visible? Proceed more actions
       if (visible === true) {
-        // Mark as inserted? (insert overlay on first mark-as-visible)
-        if (this.isInserted !== true) {
-          this.isInserted = true;
-        }
+        // Update anchor position of root element
+        const rootElement = this.$refs.root as HTMLElement,
+          rootBounds = rootElement.getBoundingClientRect();
+
+        this.overlayAnchor = [rootBounds.left, rootBounds.top];
+        this.overlayOrigin = [rootBounds.width, rootBounds.height];
 
         // Schedule auto-hide?
         // Notice: this is done to auto-clear any dangling tooltip that did \
@@ -218,100 +210,12 @@ export default {
 <style lang="scss">
 $c: ".c-base-tooltip";
 
-// VARIABLES
-$tooltip-spacing-block: 6px;
-$tooltip-spacing-inline: -3px;
-
 #{$c} {
   display: inline-block;
   position: relative;
 
-  #{$c}__overlay {
-    font-weight: initial;
-    line-height: 18px;
-    user-select: none;
-    cursor: default;
-    width: max-content;
-    opacity: 0;
-    display: block;
-    visibility: hidden;
-    position: absolute;
-    z-index: $index-foreground-tertiary;
-  }
-
-  #{$c}__value {
-    background-color: rgba(var(--color-white), 0.9);
-    backdrop-filter: blur(3px);
-    font-size: 11.5px;
-    user-select: none;
-    text-align: center;
-    letter-spacing: 0.1px;
-    padding: 5px 10px;
-    display: inline-block;
-    border-radius: 3px;
-    box-shadow: 0 2px 6px 0 rgba(var(--color-shadow-primary), 0.06);
-
-    &,
-    a {
-      color: rgb(var(--color-text-primary));
-    }
-
-    a {
-      text-decoration: underline;
-    }
-  }
-
   #{$c}__wrapped {
     display: contents;
   }
-
-  // --> DIRECTIONS <--
-
-  &--top {
-    > #{$c}__overlay {
-      padding-block-end: $tooltip-spacing-block;
-      inset-block-end: 100%;
-    }
-  }
-
-  &--bottom {
-    > #{$c}__overlay {
-      padding-block-start: $tooltip-spacing-block;
-      inset-block-start: 100%;
-    }
-  }
-
-  // --> ALIGNS <--
-
-  &--left {
-    > #{$c}__overlay {
-      inset-inline-start: $tooltip-spacing-inline;
-      text-align: left;
-    }
-  }
-
-  &--center {
-    > #{$c}__overlay {
-      text-align: center;
-      inset-inline-start: 50%;
-      transform: translateX(-50%);
-    }
-  }
-
-  &--right {
-    > #{$c}__overlay {
-      inset-inline-end: $tooltip-spacing-inline;
-      text-align: right;
-    }
-  }
-
-  // --> BOOLEANS <--
-
-  &--visible {
-    > #{$c}__overlay {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
 }
 </style>
diff --git a/src/components/base/BaseTooltipOverlay.vue b/src/components/base/BaseTooltipOverlay.vue
new file mode 100644
index 00000000..e603fc21
--- /dev/null
+++ b/src/components/base/BaseTooltipOverlay.vue
@@ -0,0 +1,226 @@
+<!--
+ * This file is part of prose-app-web
+ *
+ * Copyright 2024, Prose Foundation
+ -->
+
+<!-- **********************************************************************
+     TEMPLATE
+     ********************************************************************** -->
+
+<template lang="pug">
+teleport(
+  to="#app"
+)
+  div(
+    :class=`[
+      "c-base-tooltip-overlay",
+      "c-base-tooltip-overlay--" + direction,
+      "c-base-tooltip-overlay--" + align
+    ]`
+    :style="overlayStyle"
+  )
+    span.c-base-tooltip-overlay__value
+      | {{ value }}
+</template>
+
+<!-- **********************************************************************
+     SCRIPT
+     ********************************************************************** -->
+
+<script lang="ts">
+// ENUMERATIONS
+enum PositionRule {
+  // Start position rule.
+  Start = "start",
+  // End position rule.
+  End = "end"
+}
+
+export default {
+  name: "BaseTooltipOverlay",
+
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+
+    align: {
+      type: String,
+      required: true,
+
+      validator(x: string): boolean {
+        return ["left", "center", "right"].includes(x);
+      }
+    },
+
+    direction: {
+      type: String,
+      required: true,
+
+      validator(x: string): boolean {
+        return ["top", "bottom"].includes(x);
+      }
+    },
+
+    anchor: {
+      type: Array<number>,
+      required: true,
+
+      validator(x: Array<number>): boolean {
+        return x.length === 2;
+      }
+    },
+
+    origin: {
+      type: Array<number>,
+      required: true,
+
+      validator(x: Array<number>): boolean {
+        return x.length === 2;
+      }
+    }
+  },
+
+  computed: {
+    overlayStyle(): { [property: string]: string } {
+      // Compute all rules
+      const [horizontalRule, horizontalOffset] = this.computeHorizontalRule(),
+        [verticalRule, verticalOffset] = this.computeVerticalRule();
+
+      return {
+        // Horizontal position
+        [horizontalRule === PositionRule.End
+          ? "insetInlineEnd"
+          : "insetInlineStart"]: `${horizontalOffset}px`,
+
+        // Vertical position
+        [verticalRule === PositionRule.End
+          ? "insetBlockEnd"
+          : "insetBlockStart"]: `${verticalOffset}px`
+      };
+    }
+  },
+
+  methods: {
+    // --> HELPERS <--
+
+    computeHorizontalRule(): [PositionRule, number] {
+      switch (this.align) {
+        case "left": {
+          return [PositionRule.Start, this.anchor[0]];
+        }
+
+        case "right": {
+          return [
+            PositionRule.End,
+            document.documentElement.clientWidth -
+              this.anchor[0] -
+              this.origin[0]
+          ];
+        }
+
+        case "center": {
+          return [PositionRule.Start, this.anchor[0] + this.origin[0] / 2];
+        }
+
+        default: {
+          return [PositionRule.Start, 0];
+        }
+      }
+    },
+
+    computeVerticalRule(): [PositionRule, number] {
+      switch (this.direction) {
+        case "top": {
+          return [
+            PositionRule.End,
+            document.documentElement.clientHeight - this.anchor[1]
+          ];
+        }
+
+        case "bottom": {
+          return [PositionRule.Start, this.anchor[1] + this.origin[1]];
+        }
+
+        default: {
+          return [PositionRule.Start, 0];
+        }
+      }
+    }
+  }
+};
+</script>
+
+<!-- **********************************************************************
+     STYLE
+     ********************************************************************** -->
+
+<style lang="scss">
+$c: ".c-base-tooltip-overlay";
+
+// VARIABLES
+$tooltip-spacing-block: 6px;
+$tooltip-spacing-inline: -3px;
+
+#{$c} {
+  font-weight: initial;
+  line-height: 18px;
+  user-select: none;
+  cursor: default;
+  width: max-content;
+  display: block;
+  position: fixed;
+  z-index: $index-foreground-secondary;
+
+  #{$c}__value {
+    background-color: rgba(var(--color-white), 0.9);
+    backdrop-filter: blur(3px);
+    font-size: 11.5px;
+    user-select: none;
+    text-align: center;
+    letter-spacing: 0.1px;
+    padding: 5px 10px;
+    display: inline-block;
+    border-radius: 3px;
+    box-shadow: 0 2px 6px 0 rgba(var(--color-shadow-primary), 0.06);
+
+    &,
+    a {
+      color: rgb(var(--color-text-primary));
+    }
+
+    a {
+      text-decoration: underline;
+    }
+  }
+
+  // --> DIRECTIONS <--
+
+  &--top {
+    padding-block-end: $tooltip-spacing-block;
+  }
+
+  &--bottom {
+    padding-block-start: $tooltip-spacing-block;
+  }
+
+  // --> ALIGNS <--
+
+  &--left {
+    margin-inline-start: $tooltip-spacing-inline;
+    text-align: left;
+  }
+
+  &--center {
+    text-align: center;
+    transform: translateX(-50%);
+  }
+
+  &--right {
+    margin-inline-end: $tooltip-spacing-inline;
+    text-align: right;
+  }
+}
+</style>