Rewrite tooltip UI for efficiency and Vue 3.0 #230

- Introduce a new UI component for tooltips. - Fix tooltip arrow misalignment issues in code download/execution instructions dialogs. Reasons for dropping `v-tooltip` dependency: - Lack of support for Vue 3.0, which blocks migration to Vue 3.0 (see #230). - Inability to render HTML content that's required for privacy.sexy. - Inefficient, adding an extra 162.48 KB to the production bundle for web distribution (tested using `npm run build -- --mode production`). Advantages of adopting `floating-ui` (Floating UI): - Compatibility across multiple Vue versions including 2.0, 2.7, and 3.0. - Reduced boilerplate resulting in cleaner, more maintainable code. - Efficient position recalculations without reinventing the wheel.
2023-09-18 17:57:50 +02:00
parent f810ed0c14
commit 8b930fc57c
8 changed files with 248 additions and 160 deletions
--- a/docs/presentation.md
+++ b/docs/presentation.md
@@ -20,7 +20,6 @@ The presentation layer uses an event-driven architecture for bidirectional react
    - [**`fonts/`**](./../src/presentation/assets/fonts/): Contains fonts.
    - [**`styles/`**](./../src/presentation/assets/styles/): Contains shared styles.
      - [**`components/`**](./../src/presentation/assets/styles/components): Contains styles coupled to Vue components.
-      - [**`vendors-extensions/`**](./../src/presentation/assets/styles/third-party-extensions): Contains styles for third-party components.
      - [**`main.scss`**](./../src/presentation/assets/styles/main.scss): Main Sass file, imported by other components as single entrypoint.
  - [**`main.ts`**](./../src/presentation/main.ts): Starts Vue app.
  - [**`electron/`**](./../src/presentation/electron/): Contains Electron code.
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,9 +6,10 @@
  "packages": {
    "": {
      "name": "privacy.sexy",
-      "version": "0.12.2",
+      "version": "0.12.3",
      "hasInstallScript": true,
      "dependencies": {
+        "@floating-ui/vue": "^1.0.2",
        "@fortawesome/fontawesome-svg-core": "^6.4.0",
        "@fortawesome/free-brands-svg-icons": "^6.4.0",
        "@fortawesome/free-regular-svg-icons": "^6.4.0",
@@ -21,7 +22,6 @@
        "file-saver": "^2.0.5",
        "markdown-it": "^13.0.1",
        "npm": "^9.8.1",
-        "v-tooltip": "2.1.3",
        "vue": "^2.7.14"
      },
      "devDependencies": {
@@ -1716,6 +1716,7 @@
      "version": "7.22.10",
      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.10.tgz",
      "integrity": "sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==",
+      "dev": true,
      "dependencies": {
        "regenerator-runtime": "^0.14.0"
      },
@@ -1726,7 +1727,8 @@
    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
      "version": "0.14.0",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
+      "dev": true
    },
    "node_modules/@babel/template": {
      "version": "7.22.5",
@@ -2520,6 +2522,62 @@
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "dependencies": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.3.tgz",
+      "integrity": "sha512-uvnFKtPgzLnpzzTRfhDlvXX0kLYi9lDRQbcDmT8iXl71Rx+uwSuaUIQl3DNC7w5OweAQ7XQMDObML+KaYDQfng=="
+    },
+    "node_modules/@floating-ui/vue": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.2.tgz",
+      "integrity": "sha512-sImlAl9mAoCKZLNlwWz2P2ZMJIDlOEDXrRD6aD2sIHAka1LPC+nWtB+D3lPe7IE7FGWSbwBPTnlSdlABa3Fr0A==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.4.5",
+        "vue-demi": ">=0.13.0"
+      }
+    },
+    "node_modules/@floating-ui/vue/node_modules/vue-demi": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@fortawesome/fontawesome-common-types": {
      "version": "6.4.2",
      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
@@ -10909,7 +10967,8 @@
    "node_modules/lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
    },
    "node_modules/lodash.debounce": {
      "version": "4.0.8",
@@ -16098,16 +16157,6 @@
        "node": ">=12.13.0"
      }
    },
-    "node_modules/popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
    "node_modules/postcss": {
      "version": "8.4.28",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
@@ -20339,17 +20388,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/v-tooltip": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.1.3.tgz",
-      "integrity": "sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "lodash": "^4.17.21",
-        "popper.js": "^1.16.1",
-        "vue-resize": "^1.0.1"
-      }
-    },
    "node_modules/validate-npm-package-license": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -20750,17 +20788,6 @@
        "url": "https://opencollective.com/eslint"
      }
    },
-    "node_modules/vue-resize": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
-      "integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "vue": "^2.6.0"
-      }
-    },
    "node_modules/vue-template-compiler": {
      "version": "2.7.14",
      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
@@ -22436,6 +22463,7 @@
      "version": "7.22.10",
      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.10.tgz",
      "integrity": "sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==",
+      "dev": true,
      "requires": {
        "regenerator-runtime": "^0.14.0"
      },
@@ -22443,7 +22471,8 @@
        "regenerator-runtime": {
          "version": "0.14.0",
          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-          "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+          "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
+          "dev": true
        }
      }
    },
@@ -22947,6 +22976,45 @@
      "integrity": "sha512-P6omY1zv5MItm93kLM8s2vr1HICJH8v0dvddDhysbIuZ+vcjOHg5Zbkf1mTkcmi2JA9oBG2anOkRnW8WJTS8Og==",
      "dev": true
    },
+    "@floating-ui/core": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "requires": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "requires": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "@floating-ui/utils": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.3.tgz",
+      "integrity": "sha512-uvnFKtPgzLnpzzTRfhDlvXX0kLYi9lDRQbcDmT8iXl71Rx+uwSuaUIQl3DNC7w5OweAQ7XQMDObML+KaYDQfng=="
+    },
+    "@floating-ui/vue": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.2.tgz",
+      "integrity": "sha512-sImlAl9mAoCKZLNlwWz2P2ZMJIDlOEDXrRD6aD2sIHAka1LPC+nWtB+D3lPe7IE7FGWSbwBPTnlSdlABa3Fr0A==",
+      "requires": {
+        "@floating-ui/dom": "^1.4.5",
+        "vue-demi": ">=0.13.0"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.6",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+          "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+          "requires": {}
+        }
+      }
+    },
    "@fortawesome/fontawesome-common-types": {
      "version": "6.4.2",
      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
@@ -29343,7 +29411,8 @@
    "lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
    },
    "lodash.debounce": {
      "version": "4.0.8",
@@ -32853,11 +32922,6 @@
      "integrity": "sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==",
      "dev": true
    },
-    "popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
-    },
    "postcss": {
      "version": "8.4.28",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.28.tgz",
@@ -36079,17 +36143,6 @@
        "sade": "^1.7.3"
      }
    },
-    "v-tooltip": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.1.3.tgz",
-      "integrity": "sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==",
-      "requires": {
-        "@babel/runtime": "^7.13.10",
-        "lodash": "^4.17.21",
-        "popper.js": "^1.16.1",
-        "vue-resize": "^1.0.1"
-      }
-    },
    "validate-npm-package-license": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -36316,14 +36369,6 @@
        }
      }
    },
-    "vue-resize": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
-      "integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
-      "requires": {
-        "@babel/runtime": "^7.13.10"
-      }
-    },
    "vue-template-compiler": {
      "version": "2.7.14",
      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
    "postuninstall": "electron-builder install-app-deps"
  },
  "dependencies": {
+    "@floating-ui/vue": "^1.0.2",
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-brands-svg-icons": "^6.4.0",
    "@fortawesome/free-regular-svg-icons": "^6.4.0",
@@ -46,7 +47,6 @@
    "file-saver": "^2.0.5",
    "markdown-it": "^13.0.1",
    "npm": "^9.8.1",
-    "v-tooltip": "2.1.3",
    "vue": "^2.7.14"
  },
  "devDependencies": {
--- a/src/presentation/assets/styles/main.scss
+++ b/src/presentation/assets/styles/main.scss
@@ -7,5 +7,3 @@
@forward "./mixins";

@forward "./components/card";
-
-@forward "./third-party-extensions/tooltip.scss";
--- a/src/presentation/assets/styles/third-party-extensions/_tooltip.scss
+++ b/src/presentation/assets/styles/third-party-extensions/_tooltip.scss
@@ -1,45 +0,0 @@
-// Based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
-@use "@/presentation/assets/styles/colors" as *;
-
-.tooltip {
-    display: block !important;
-    z-index: 10000;
-    .tooltip-inner {
-      background: $color-primary-darkest;
-      color: $color-on-primary;
-      border-radius: 16px;
-      padding: 5px 10px 4px;
-    }
-    .tooltip-arrow {
-      width: 0;
-      height: 0;
-      border-style: solid;
-      position: absolute;
-      margin: 5px;
-      border-color: $color-primary-darkest;
-      z-index: 1;
-    }
-    &[x-placement^="top"] {
-      margin-bottom: 5px;
-      .tooltip-arrow {
-        border-width: 5px 5px 0 5px;
-        border-left-color: transparent !important;
-        border-right-color: transparent !important;
-        border-bottom-color: transparent !important;
-        bottom: -5px;
-        left: calc(50% - 5px);
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-    }
-    &[aria-hidden='true'] {
-      visibility: hidden;
-      opacity: 0;
-      transition: opacity .15s, visibility .15s;
-    }
-    &[aria-hidden='false'] {
-      visibility: visible;
-      opacity: 1;
-      transition: opacity .15s;
-    }
-  }
--- a/src/presentation/bootstrapping/ApplicationBootstrapper.ts
+++ b/src/presentation/bootstrapping/ApplicationBootstrapper.ts
@@ -1,7 +1,6 @@
 import { IconBootstrapper } from './Modules/IconBootstrapper';
 import { VueConstructor, IVueBootstrapper } from './IVueBootstrapper';
 import { VueBootstrapper } from './Modules/VueBootstrapper';
-import { TooltipBootstrapper } from './Modules/TooltipBootstrapper';
 import { RuntimeSanityValidator } from './Modules/RuntimeSanityValidator';
 import { AppInitializationLogger } from './Modules/AppInitializationLogger';

@@ -17,7 +16,6 @@ export class ApplicationBootstrapper implements IVueBootstrapper {
    return [
      new IconBootstrapper(),
      new VueBootstrapper(),
-      new TooltipBootstrapper(),
      new RuntimeSanityValidator(),
      new AppInitializationLogger(),
    ];
--- a/src/presentation/bootstrapping/Modules/TooltipBootstrapper.ts
+++ b/src/presentation/bootstrapping/Modules/TooltipBootstrapper.ts
@@ -1,8 +0,0 @@
-import VTooltip from 'v-tooltip';
-import { VueConstructor, IVueBootstrapper } from '../IVueBootstrapper';
-
-export class TooltipBootstrapper implements IVueBootstrapper {
-  public bootstrap(vue: VueConstructor): void {
-    vue.use(VTooltip);
-  }
-}
--- a/src/presentation/components/Shared/TooltipWrapper.vue
+++ b/src/presentation/components/Shared/TooltipWrapper.vue
@@ -1,65 +1,166 @@
-<!--
-  This component acts as a wrapper for the v-tooltip to solve the following:
-    - Direct inclusion of inline HTML in tooltip components has challenges such as
-      - absence of linting or editor support,
-      - involves cumbersome string concatenation.
-      This component caters to these issues by permitting HTML usage in a slot.
-    - It provides an abstraction for a third-party component which simplifies
-      switching and acts as an anti-corruption layer.
-->
-
 <template>
-  <div class="tooltip-container" v-tooltip.top-center="tooltipHtml">
-    <slot />
-    <div class="tooltip-content" ref="tooltipWrapper">
-      <slot name="tooltip" />
+  <div class="tooltip">
+    <div
+      class="tooltip__trigger"
+      ref="triggeringElement">
+      <slot />
+    </div>
+    <div
+      class="tooltip__display"
+      ref="tooltipDisplayElement"
+      :style="displayStyles"
+    >
+      <div class="tooltip__content">
+        <slot name="tooltip" />
+      </div>
+      <div
+        ref="arrowElement"
+        class="tooltip__arrow"
+        :style="arrowStyles"
+      />
    </div>
  </div>
 </template>

 <script lang="ts">
 import {
-  defineComponent, ref, onMounted, onUpdated, nextTick,
-} from 'vue';
+  useFloating, arrow, shift, flip, Placement, offset, Side, Coords,
+} from '@floating-ui/vue';
+import { defineComponent, ref, computed } from 'vue';
+import type { CSSProperties } from 'vue/types/jsx'; // In Vue 3.0 import from 'vue'
+
+const GAP_BETWEEN_TOOLTIP_AND_TRIGGER_IN_PX = 2;
+const ARROW_SIZE_IN_PX = 4;
+const MARGIN_FROM_DOCUMENT_EDGE_IN_PX = 2;

 export default defineComponent({
  setup() {
-    const tooltipWrapper = ref<HTMLElement | undefined>();
-    const tooltipHtml = ref<string | undefined>();
+    const tooltipDisplayElement = ref<HTMLElement | undefined>();
+    const triggeringElement = ref<HTMLElement | undefined>();
+    const arrowElement = ref<HTMLElement | undefined>();
+    const placement = ref<Placement>('top');

-    onMounted(() => updateTooltipHTML());
-
-    onUpdated(() => {
-      nextTick(() => {
-        updateTooltipHTML();
-      });
+    const { floatingStyles, middlewareData } = useFloating(
+      triggeringElement,
+      tooltipDisplayElement,
+      {
+        placement: ref(placement),
+        middleware: [
+          offset(ARROW_SIZE_IN_PX + GAP_BETWEEN_TOOLTIP_AND_TRIGGER_IN_PX),
+          /* Shifts the element along the specified axes in order to keep it in view. */
+          shift({
+            padding: MARGIN_FROM_DOCUMENT_EDGE_IN_PX,
+          }),
+          /*  Changes the placement of the floating element in order to keep it in view,
+              with the ability to flip to any placement. */
+          flip(),
+          arrow({ element: arrowElement }),
+        ],
+      },
+    );
+    const arrowStyles = computed<CSSProperties>(() => {
+      if (!middlewareData.value.arrow) {
+        return {
+          display: 'none',
+        };
+      }
+      return {
+        ...getArrowPositionStyles(middlewareData.value.arrow, placement.value),
+        ...getArrowAppearanceStyles(),
+      };
    });

-    function updateTooltipHTML() {
-      const newValue = tooltipWrapper.value?.innerHTML;
-      const oldValue = tooltipHtml.value;
-      if (newValue === oldValue) {
-        return;
-      }
-      tooltipHtml.value = newValue;
-    }
-
    return {
-      tooltipWrapper,
-      tooltipHtml,
+      tooltipDisplayElement,
+      triggeringElement,
+      displayStyles: floatingStyles,
+      arrowStyles,
+      arrowElement,
+      placement,
    };
  },
 });
+
+function getArrowAppearanceStyles(): CSSProperties {
+  return {
+    width: `${ARROW_SIZE_IN_PX * 2}px`,
+    height: `${ARROW_SIZE_IN_PX * 2}px`,
+    rotate: '45deg',
+  };
+}
+
+function getArrowPositionStyles(
+  coordinations: Partial<Coords>,
+  placement: Placement,
+): CSSProperties {
+  const style: CSSProperties = {};
+  style.position = 'absolute';
+  const { x, y } = coordinations;
+  if (x) {
+    style.left = `${x}px`;
+  } else if (y) { // either X or Y is calculated
+    style.top = `${y}px`;
+  }
+  const oppositeSide = getCounterpartBoxOffsetProperty(placement) as never;
+  // Cast to `never` due to ts(2590) from JSX import. Remove after migrating to Vue 3.0.
+  style[oppositeSide] = `-${ARROW_SIZE_IN_PX}px`;
+  return style;
+}
+
+function getCounterpartBoxOffsetProperty(placement: Placement): keyof CSSProperties {
+  const sideCounterparts: Record<Side, keyof CSSProperties> = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right',
+  };
+  const currentSide = placement.split('-')[0] as Side;
+  return sideCounterparts[currentSide];
+}
 </script>

 <style scoped lang="scss">
@use "@/presentation/assets/styles/main" as *;

-.tooltip-container {
-  display: inline-block;
+$color-tooltip-background: $color-primary-darkest;
+
+@mixin set-visibility($isVisible: true) {
+  @if $isVisible {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity .15s;
+  } @else {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity .15s, visibility .15s;
+  }
 }

-.tooltip-content {
-  display: none;
+.tooltip {
+  display: inline-flex;
+}
+
+.tooltip__display {
+  @include set-visibility(false);
+}
+
+.tooltip__trigger {
+  @include hover-or-touch {
+    + .tooltip__display {
+      @include set-visibility(true);
+      z-index: 10000;
+    }
+  }
+}
+
+.tooltip__content {
+  background: $color-tooltip-background;
+  color: $color-on-primary;
+  border-radius: 16px;
+  padding: 5px 10px 4px;
+}
+
+.tooltip__arrow {
+  background: $color-tooltip-background;
 }
 </style>