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>
This commit is contained in:
Dawid Nowak 2024-02-14 09:07:15 +01:00 committed by GitHub
parent 730a2e7ae1
commit 21a7dc80a8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 67 additions and 4 deletions

View File

@ -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;
}
}
}
}

View File

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

View File

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