Positioning terminology tooltip to be always fully visible (#31355)

* Positioning terminology tooltip to be always fully visible

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

* terminology_tooltip: removed debugs

resolves 7a0183402f (r1485840114)

* terminology_tooltip: removed $–convention from var names

resolves 7a0183402f (r1485839944)

* terminology_tooltip: let -> const

---------

Co-authored-by: Joakim Sørensen <joasoe@gmail.com>

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: calc(50% - var(--horizontal-move));
-      left: 50%;
       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;
+      }
+    }
   }
 }

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">

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');
+    });
+});