From 21a7dc80a804303ee6cc52b447e54d9b029b03e4 Mon Sep 17 00:00:00 2001
From: Dawid Nowak <code@dnowak.pl>
Date: Wed, 14 Feb 2024 09:07:15 +0100
Subject: [PATCH] Positioning terminology tooltip to be always fully visible
 (#31355)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Positioning terminology tooltip to be always fully visible

#resolves https://github.com/home-assistant/home-assistant.io/issues/31341

* terminology_tooltip: removed debugs

resolves https://github.com/home-assistant/home-assistant.io/pull/31355/commits/7a0183402fe72f0a3f205db6a3457a183a597791#r1485840114

* terminology_tooltip: removed $–convention from var names

resolves https://github.com/home-assistant/home-assistant.io/pull/31355/commits/7a0183402fe72f0a3f205db6a3457a183a597791#r1485839944

* terminology_tooltip: let -> const

---------

Co-authored-by: Joakim Sørensen <joasoe@gmail.com>
---
 sass/custom/_terminology_tooltip.scss     | 31 +++++++++++++++---
 source/_includes/javascripts/scripts.html |  2 ++
 source/javascripts/terminology_tooltip.js | 38 +++++++++++++++++++++++
 3 files changed, 67 insertions(+), 4 deletions(-)
 create mode 100644 source/javascripts/terminology_tooltip.js

diff --git a/sass/custom/_terminology_tooltip.scss b/sass/custom/_terminology_tooltip.scss
index fea762f43c5..9794b3f8e40 100644
--- a/sass/custom/_terminology_tooltip.scss
+++ b/sass/custom/_terminology_tooltip.scss
@@ -9,6 +9,8 @@
   }
 
   .terminology-tooltip {
+    --horizontal-move: 0px;
+
     visibility: hidden;
     width: 250px;
     background-color: $primary-color;
@@ -24,7 +26,7 @@
     z-index: 1;
   
     bottom: 100%;
-    left: 50%;
+    left: calc(50% + var(--horizontal-move));
     margin-left: -125px;
 
     a {
@@ -32,15 +34,36 @@
       font-weight: 500;
     }
 
-    &:after {
+    @mixin arrow {
       content: " ";
       position: absolute;
-      top: 100%;
-      left: 50%;
+      left: calc(50% - var(--horizontal-move));
       margin-left: -5px;
       border-width: 5px;
       border-style: solid;
+    }
+
+    &:after {
+      @include arrow;
+
+      top: 100%;
       border-color: $primary-color transparent transparent transparent;
     }
+
+    &.below {
+      bottom: auto;
+      top: 1lh;
+
+      &:before {
+        @include arrow;
+
+        top: -10px;
+        border-color: transparent transparent $primary-color transparent;
+      }
+
+      &:after {
+        display: none;
+      }
+    }
   }
 }
diff --git a/source/_includes/javascripts/scripts.html b/source/_includes/javascripts/scripts.html
index aa54f12cd05..f2b630cf0a1 100644
--- a/source/_includes/javascripts/scripts.html
+++ b/source/_includes/javascripts/scripts.html
@@ -1,5 +1,7 @@
 <script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.3.1/lite-youtube.js"></script>
 
+<script src="{{ '/javascripts/terminology_tooltip.js' | cache_buster }}" type="text/javascript" defer></script>
+
 <script src="{{ '/javascripts/prism.js' | cache_buster }}" type="text/javascript" defer></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@docsearch/js@3/dist/umd/index.min.js"></script>
 <script type="text/javascript">
diff --git a/source/javascripts/terminology_tooltip.js b/source/javascripts/terminology_tooltip.js
new file mode 100644
index 00000000000..83fb0330b13
--- /dev/null
+++ b/source/javascripts/terminology_tooltip.js
@@ -0,0 +1,38 @@
+'use strict';
+
+[...document.getElementsByClassName('terminology')].forEach(terminology => {
+    const horizontalMargin = 20;
+
+    const topMargin = document
+        .getElementsByClassName('site-header')[0]
+        .clientHeight;
+
+    const tooltip = terminology.querySelector('.terminology-tooltip');
+
+    terminology.addEventListener('mouseenter', () => {
+        const tooltipRect = tooltip.getBoundingClientRect();
+
+        if (tooltipRect.top < topMargin) {
+            // doesn't fit on top -> moving to bottom
+            tooltip.classList.add('below');
+        }
+
+        let horizontalMove = 0;
+
+        if (tooltipRect.left < horizontalMargin) {
+            // doesn't fit on the left edge -> moving right
+            horizontalMove = Math.abs(tooltipRect.left) + horizontalMargin;
+        } else if (tooltipRect.right + horizontalMargin > window.innerWidth) {
+            // doesn't fit on the right edge -> moving left
+            horizontalMove = window.innerWidth - tooltipRect.right - horizontalMargin;
+        }
+
+        tooltip.style.setProperty('--horizontal-move', `${horizontalMove}px`);
+    });
+
+    terminology.addEventListener('mouseleave', () => {
+        // reset
+        tooltip.style.setProperty('--horizontal-move', '0px');
+        tooltip.classList.remove('below');
+    });
+});