Skip to content

Commit 22a5c16

Browse files
HofiOneHofiOne
committed
Added a tooltipRenderer helper to be able to get the correct tooltip size prior to showing it
Signed-off-by: Hofi <hofione@gmail.com>
1 parent c0d37ed commit 22a5c16

File tree

5 files changed

+62
-38
lines changed

5 files changed

+62
-38
lines changed

‎_js/custom/navigation.js

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -405,23 +405,27 @@ $(function () {
405405
/* _variables.scss & _navigation.scss - .tooltip:before */
406406
const toolTipArrowHalfSize = 10; /* $tooltip-arrow-half-size */
407407
var tooltip = null;
408+
var tooltipRenderer = null;
408409
var tooltipTarget = null;
409410
var elementUnderCursor = null;
410411
var shouldShowTooltip = false;
411412
var showTimeoutFuncID;
412413
var hideTimeoutFuncID;
413414

414415
function setTooltipPos(event, tooltipTarget, alignment) {
415-
const mouseX = event.clientX;
416416
const rect = tooltipTarget.getBoundingClientRect();
417417
var computedTargetStyle = window.getComputedStyle(tooltipTarget);
418418
var lineHeight = parseFloat(computedTargetStyle.getPropertyValue('line-height'));
419-
// Size is still not yet calculated correctly here
420-
var tooltipRect = tooltip.getBoundingClientRect();
421-
var computedTooltipStyle = window.getComputedStyle(tooltip);
422-
var tooltipWidth = parseFloat(computedTooltipStyle.getPropertyValue('width'));
419+
// NOTE: The content of the targeted tooltip is still not yet calculated correctly here, as it is invisible, and getting visible is animated multiple ways
420+
// use, the always visible, not animated at all, but offscreen pair of it (tooltipRenderer) for rendered size calculations.
421+
// To get this work all the animation styles must be removed in the css (_navigations.scss) for #tooltipRenderer
422+
// TODO: Now we have the correct tooltip content via teh tooltipRenderer trick.
423+
// Prevent tooltip overflow on window edges in all directions.
424+
var tooltipRect = tooltipRenderer.getBoundingClientRect();
425+
var tooltipWidth = tooltipRect.width;
423426
var pos = new DOMPoint();
424427

428+
const mouseX = event.clientX;
425429
var xShift = (alignment == 'tooltip-align-left' ? tooltipWidth : (alignment == 'tooltip-align-center' ? tooltipWidth / 2 : 0));
426430
pos.x = mouseX; // Use now mouse X instead - Math.max(0, pos.x + document.documentElement.scrollLeft + rect.left);
427431
pos.x -= xShift;
@@ -445,34 +449,30 @@ $(function () {
445449
}
446450

447451
function showTooltip(event, tooltipText, alignment, isFullPageContent) {
452+
448453
tooltip.innerHTML = tooltipText.innerHTML;
454+
tooltipRenderer.innerHTML = tooltipText.innerHTML;
449455

450-
// FIXME: try to limit the tooltip height not to overflow at bottom
451-
// This
452-
// - still has no scroll bar in the inner content
453-
// - screws up the arrow bellow
454-
// var firstDiv = tooltip.querySelector("div");
455-
// if (firstDiv) {
456-
// tooltip.style.maxHeight = window.innerHeight + 'px';
457-
// tooltip.style.overflowY = 'hidden';
458-
// firstDiv.style.overflowY = 'auto';
459-
// }
460-
461-
if (isFullPageContent)
456+
if (isFullPageContent) {
462457
tooltip.classList.add("full-content-tooltip");
463-
else
458+
tooltipRenderer.classList.add("full-content-tooltip");
459+
}
460+
else {
464461
tooltip.classList.remove("full-content-tooltip");
462+
tooltipRenderer.classList.remove("full-content-tooltip");
463+
}
465464
tooltip.classList.remove('tooltip-align-left', 'tooltip-align-center', 'tooltip-align-right');
465+
tooltipRenderer.classList.remove('tooltip-align-left', 'tooltip-align-center', 'tooltip-align-right');
466466
tooltip.classList.add(alignment);
467+
tooltipRenderer.classList.add(alignment);
467468

468-
setTooltipPos(event, tooltipTarget, alignment)
469-
470469
shouldShowTooltip = true;
471470

472471
clearTimeout(hideTimeoutFuncID);
473472
clearTimeout(showTimeoutFuncID);
474473
showTimeoutFuncID = setTimeout(function () {
475474
if (shouldShowTooltip) {
475+
setTooltipPos(event, tooltipTarget, alignment);
476476
tooltip.classList.add('visible');
477477
}
478478
}, 100);
@@ -504,6 +504,7 @@ $(function () {
504504
function addContentTooltips() {
505505
var tooltipElements = document.querySelectorAll('.content-tooltip');
506506
tooltip = document.getElementById('tooltip');
507+
tooltipRenderer = document.getElementById('tooltipRenderer');
507508
hideTooltip();
508509

509510
tooltipElements.forEach(function (element) {
@@ -527,13 +528,9 @@ $(function () {
527528
newContent = newContent.innerHTML;
528529
newContent = alterContentForTooltip(newContent, url. isFullPageContent);
529530

530-
if (newContent.length > 0) {
531-
// cache for reuse
532-
tooltipText.innerHTML = newContent;
533-
setTimeout(() => {
534-
// Get the bounding client rect after rendering
535-
showTooltip(event, tooltipText, alignment, isFullPageContent);
536-
}, 0);
531+
if (newContent.length > 0) {
532+
tooltipText.innerHTML = newContent; // cache for reuse
533+
showTooltip(event, tooltipText, alignment, isFullPageContent);
537534
}
538535
else {
539536
// Quick navigation from another link with tooltip to this link would keep alive the previous tooltip

‎_js/main.min.js

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8684,20 +8684,20 @@ $(function() {
86848684
}
86858685
const toolTipArrowHalfSize = 10;
86868686
var tooltip = null;
8687+
var tooltipRenderer = null;
86878688
var tooltipTarget = null;
86888689
var elementUnderCursor = null;
86898690
var shouldShowTooltip = false;
86908691
var showTimeoutFuncID;
86918692
var hideTimeoutFuncID;
86928693
function setTooltipPos(event, tooltipTarget, alignment) {
8693-
const mouseX = event.clientX;
86948694
const rect = tooltipTarget.getBoundingClientRect();
86958695
var computedTargetStyle = window.getComputedStyle(tooltipTarget);
86968696
var lineHeight = parseFloat(computedTargetStyle.getPropertyValue("line-height"));
8697-
var tooltipRect = tooltip.getBoundingClientRect();
8698-
var computedTooltipStyle = window.getComputedStyle(tooltip);
8699-
var tooltipWidth = parseFloat(computedTooltipStyle.getPropertyValue("width"));
8697+
var tooltipRect = tooltipRenderer.getBoundingClientRect();
8698+
var tooltipWidth = tooltipRect.width;
87008699
var pos = new DOMPoint();
8700+
const mouseX = event.clientX;
87018701
var xShift = alignment == "tooltip-align-left" ? tooltipWidth : alignment == "tooltip-align-center" ? tooltipWidth / 2 : 0;
87028702
pos.x = mouseX;
87038703
pos.x -= xShift;
@@ -8715,15 +8715,24 @@ $(function() {
87158715
}
87168716
function showTooltip(event, tooltipText, alignment, isFullPageContent) {
87178717
tooltip.innerHTML = tooltipText.innerHTML;
8718-
if (isFullPageContent) tooltip.classList.add("full-content-tooltip"); else tooltip.classList.remove("full-content-tooltip");
8718+
tooltipRenderer.innerHTML = tooltipText.innerHTML;
8719+
if (isFullPageContent) {
8720+
tooltip.classList.add("full-content-tooltip");
8721+
tooltipRenderer.classList.add("full-content-tooltip");
8722+
} else {
8723+
tooltip.classList.remove("full-content-tooltip");
8724+
tooltipRenderer.classList.remove("full-content-tooltip");
8725+
}
87198726
tooltip.classList.remove("tooltip-align-left", "tooltip-align-center", "tooltip-align-right");
8727+
tooltipRenderer.classList.remove("tooltip-align-left", "tooltip-align-center", "tooltip-align-right");
87208728
tooltip.classList.add(alignment);
8721-
setTooltipPos(event, tooltipTarget, alignment);
8729+
tooltipRenderer.classList.add(alignment);
87228730
shouldShowTooltip = true;
87238731
clearTimeout(hideTimeoutFuncID);
87248732
clearTimeout(showTimeoutFuncID);
87258733
showTimeoutFuncID = setTimeout(function() {
87268734
if (shouldShowTooltip) {
8735+
setTooltipPos(event, tooltipTarget, alignment);
87278736
tooltip.classList.add("visible");
87288737
}
87298738
}, 100);
@@ -8747,6 +8756,7 @@ $(function() {
87478756
function addContentTooltips() {
87488757
var tooltipElements = document.querySelectorAll(".content-tooltip");
87498758
tooltip = document.getElementById("tooltip");
8759+
tooltipRenderer = document.getElementById("tooltipRenderer");
87508760
hideTooltip();
87518761
tooltipElements.forEach(function(element) {
87528762
var tooltipText = document.createElement("span");
@@ -8764,9 +8774,7 @@ $(function() {
87648774
newContent = alterContentForTooltip(newContent, url.isFullPageContent);
87658775
if (newContent.length > 0) {
87668776
tooltipText.innerHTML = newContent;
8767-
setTimeout(() => {
8768-
showTooltip(event, tooltipText, alignment, isFullPageContent);
8769-
}, 0);
8777+
showTooltip(event, tooltipText, alignment, isFullPageContent);
87708778
} else {
87718779
hideTooltip(false);
87728780
}

‎_layouts/default.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
{% endif %}
1717

1818
<span id="tooltip" class="tooltip"></span>
19+
<span id="tooltipRenderer" class="tooltip visible"></span>
1920

2021
<div id="footer" class="page__footer">
2122
<footer>

‎_sass/minimal-mistakes/minimal-mistakes/_navigation.scss

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -750,6 +750,7 @@
750750
// src: local('Muli'), url(http://themes.googleusercontent.com/static/fonts/muli/v4/kU4XYdV4jtS72BIidPtqyw.woff) format('woff');
751751
// }
752752

753+
// These are just for caching, never show them
753754
.tooltip-text {
754755
display: none;
755756
}
@@ -831,7 +832,24 @@
831832
-moz-transform: scale(1);
832833
-o-transform: scale(1);
833834
-ms-transform: scale(1);
834-
transform: scale(1);
835+
transform: scale(1);
836+
}
837+
838+
/* These are mandatory to get the tooltipRenderer trick work
839+
DO NOT add any animation, or anything that prevents immediate rendering of it !!!
840+
*/
841+
#tooltipRenderer {
842+
-webkit-transform: scale(1) translateX(-100%) !important;
843+
-moz-transform: scale(1) translateX(-100%) !important;
844+
-o-transform: scale(1) translateX(-100%) !important;
845+
-ms-transform: scale(1) translateX(-100%) !important;
846+
transform: scale(1) translateX(-100%) !important;
847+
848+
-webkit-transition: none !important;
849+
-moz-transition: none !important;
850+
-o-transition: none !important;
851+
-ms-transition: none !important;
852+
transition: none !important;
835853
}
836854

837855
//-----------

‎_sass/minimal-mistakes/minimal-mistakes/_search.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999

100100
&__form.is--visible {
101101
display: inline-flex;
102-
align-items: end; /* vertical bottom for inline-flex */
102+
align-items: center; // end; /* vertical bottom for inline-flex */
103103
visibility: visible;
104104

105105
a.search-help {

0 commit comments

Comments
 (0)