Skip to content

Commit dfb58b1

Browse files
HofiOneHofiOne
committed
Tooltip now can be aligned to left, right, or center (still not perfect as tooltip content pre-rendering, so determining its size is still not working)
Signed-off-by: Hofi <hofione@gmail.com>
1 parent 1e5b132 commit dfb58b1

File tree

5 files changed

+74
-46
lines changed

5 files changed

+74
-46
lines changed

‎_includes/search/search_input.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</label>
1010
<input type="search" id="search" class="search-input {% if site.search_from_masthead %}from-masthead{% else %}from-search-content{% endif %}"
1111
placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
12-
<a class="search-help content-tooltip full-content-tooltip nav-link fas fa-info-circle" href="{{ '/lunr_search_help.html' | relative_url }}"></a>
12+
<a class="search-help content-tooltip tooltip-align-center full-content-tooltip nav-link fas fa-info-circle" href="{{ '/lunr_search_help.html' | relative_url }}"></a>
1313
</form>
1414

1515
{%- when "google" -%}

‎_js/custom/navigation.js

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -402,63 +402,77 @@ $(function () {
402402
// -------------
403403
// Tooltip generation and handling
404404
// -------------
405-
const toolTipArrowSize = 10;
405+
/* _variables.scss & _navigation.scss - .tooltip:before */
406+
const toolTipArrowHalfSize = 10; /* $tooltip-arrow-half-size */
406407
var tooltip = null;
407408
var tooltipTarget = null;
408409
var elementUnderCursor = null;
409410
var shouldShowTooltip = false;
410411
var showTimeoutFuncID;
411412
var hideTimeoutFuncID;
412413

413-
function getTooltipPos(event, tooltipTarget) {
414+
function setTooltipPos(event, tooltipTarget, alignment) {
414415
const mouseX = event.clientX;
415416
const rect = tooltipTarget.getBoundingClientRect();
416-
var computedStyle = window.getComputedStyle(tooltipTarget);
417-
var lineHeight = parseFloat(computedStyle.getPropertyValue('line-height'));
418-
417+
var computedTargetStyle = window.getComputedStyle(tooltipTarget);
418+
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'));
419423
var pos = new DOMPoint();
424+
425+
var xShift = (alignment == 'tooltip-align-left' ? tooltipWidth : (alignment == 'tooltip-align-center' ? tooltipWidth / 2 : 0));
420426
pos.x = mouseX; // Use now mouse X instead - Math.max(0, pos.x + document.documentElement.scrollLeft + rect.left);
427+
pos.x -= xShift;
428+
421429
// If the occupied space of the tooltip target is bigger than its line height, it means it spanws to multiple lines
422430
// align to the upper line part in that case if the mouse is on the right side of the middle of its rect, otherwise align to the bottom row part
423431
var multilineUpperPart = (rect.height > lineHeight && mouseX > rect.x + rect.width / 2);
424432
pos.y = pos.y + document.documentElement.scrollTop + rect.top + rect.height / (multilineUpperPart ? 2 : 1);
425433

426-
return pos;
434+
var tooltipArrowHorizontalPadding = (4 * toolTipArrowHalfSize) * (alignment == 'tooltip-align-left' ? 1 : (alignment == 'tooltip-align-right' ? -1 : 0));
435+
setArrowPosition('--tooltip-arrow-left', xShift - tooltipArrowHorizontalPadding - toolTipArrowHalfSize);
436+
setArrowPosition('--tooltip-arrow-top', -1 * toolTipArrowHalfSize);
437+
438+
tooltip.style.left = pos.x + tooltipArrowHorizontalPadding + 'px';
439+
tooltip.style.top = pos.y + toolTipArrowHalfSize + 'px';
427440
}
428441

429442
function setArrowPosition(posName, position) {
430443
var newPosition = position + 'px';
431444
tooltip.style.setProperty(posName, newPosition);
432445
}
433446

434-
function showTooltip(event, tooltipText, isFullPageContent) {
447+
function showTooltip(event, tooltipText, alignment, isFullPageContent) {
435448
tooltip.innerHTML = tooltipText.innerHTML;
436449

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+
437461
if (isFullPageContent)
438462
tooltip.classList.add("full-content-tooltip");
439463
else
440464
tooltip.classList.remove("full-content-tooltip");
441-
442-
var tooltipPos = getTooltipPos(event, tooltipTarget)
443-
var tooltipArrowLeftShift = 2 * toolTipArrowSize;
444-
445-
setArrowPosition('--tooltip-arrow-top', -1 * toolTipArrowSize);
446-
setArrowPosition('--tooltip-arrow-left', tooltipArrowLeftShift + toolTipArrowSize / 2);
447-
448-
tooltip.style.left = tooltipPos.x - 2 * tooltipArrowLeftShift + 'px';
449-
tooltip.style.top = tooltipPos.y + toolTipArrowSize + 'px';
465+
tooltip.classList.remove('tooltip-align-left', 'tooltip-align-center', 'tooltip-align-right');
466+
tooltip.classList.add(alignment);
467+
468+
setTooltipPos(event, tooltipTarget, alignment)
450469

451470
shouldShowTooltip = true;
452471

453472
clearTimeout(hideTimeoutFuncID);
454473
clearTimeout(showTimeoutFuncID);
455474
showTimeoutFuncID = setTimeout(function () {
456475
if (shouldShowTooltip) {
457-
// Size is still not yet calculated correctly here
458-
// var rect = tooltip.getBoundingClientRect();
459-
// tooltip.style.top = (tooltipPos.y + rect.height) + 'px';
460-
// tooltip.style.left = (tooltipPos.x + rect.width / 2) + 'px';
461-
462476
tooltip.classList.add('visible');
463477
}
464478
}, 100);
@@ -500,6 +514,7 @@ $(function () {
500514

501515
element.addEventListener('mouseover', function (event) {
502516
var isFullPageContent = element.classList.contains('full-content-tooltip');
517+
var alignment = (element.classList.contains('tooltip-align-left') ? 'tooltip-align-left' : (element.classList.contains('tooltip-align-center') ? 'tooltip-align-center' : 'tooltip-align-right'));
503518

504519
tooltipTarget = element;
505520

@@ -515,7 +530,10 @@ $(function () {
515530
if (newContent.length > 0) {
516531
// cache for reuse
517532
tooltipText.innerHTML = newContent;
518-
showTooltip(event, tooltipText, isFullPageContent);
533+
setTimeout(() => {
534+
// Get the bounding client rect after rendering
535+
showTooltip(event, tooltipText, alignment, isFullPageContent);
536+
}, 0);
519537
}
520538
else {
521539
// Quick navigation from another link with tooltip to this link would keep alive the previous tooltip
@@ -539,7 +557,7 @@ $(function () {
539557
}
540558
}
541559
else
542-
showTooltip(event, tooltipText, isFullPageContent);
560+
showTooltip(event, tooltipText, alignment, isFullPageContent);
543561
});
544562
});
545563

‎_js/main.min.js

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8682,37 +8682,43 @@ $(function() {
86828682
onError(error);
86838683
});
86848684
}
8685-
const toolTipArrowSize = 10;
8685+
const toolTipArrowHalfSize = 10;
86868686
var tooltip = null;
86878687
var tooltipTarget = null;
86888688
var elementUnderCursor = null;
86898689
var shouldShowTooltip = false;
86908690
var showTimeoutFuncID;
86918691
var hideTimeoutFuncID;
8692-
function getTooltipPos(event, tooltipTarget) {
8692+
function setTooltipPos(event, tooltipTarget, alignment) {
86938693
const mouseX = event.clientX;
86948694
const rect = tooltipTarget.getBoundingClientRect();
8695-
var computedStyle = window.getComputedStyle(tooltipTarget);
8696-
var lineHeight = parseFloat(computedStyle.getPropertyValue("line-height"));
8695+
var computedTargetStyle = window.getComputedStyle(tooltipTarget);
8696+
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"));
86978700
var pos = new DOMPoint();
8701+
var xShift = alignment == "tooltip-align-left" ? tooltipWidth : alignment == "tooltip-align-center" ? tooltipWidth / 2 : 0;
86988702
pos.x = mouseX;
8703+
pos.x -= xShift;
86998704
var multilineUpperPart = rect.height > lineHeight && mouseX > rect.x + rect.width / 2;
87008705
pos.y = pos.y + document.documentElement.scrollTop + rect.top + rect.height / (multilineUpperPart ? 2 : 1);
8701-
return pos;
8706+
var tooltipArrowHorizontalPadding = 4 * toolTipArrowHalfSize * (alignment == "tooltip-align-left" ? 1 : alignment == "tooltip-align-right" ? -1 : 0);
8707+
setArrowPosition("--tooltip-arrow-left", xShift - tooltipArrowHorizontalPadding - toolTipArrowHalfSize);
8708+
setArrowPosition("--tooltip-arrow-top", -1 * toolTipArrowHalfSize);
8709+
tooltip.style.left = pos.x + tooltipArrowHorizontalPadding + "px";
8710+
tooltip.style.top = pos.y + toolTipArrowHalfSize + "px";
87028711
}
87038712
function setArrowPosition(posName, position) {
87048713
var newPosition = position + "px";
87058714
tooltip.style.setProperty(posName, newPosition);
87068715
}
8707-
function showTooltip(event, tooltipText, isFullPageContent) {
8716+
function showTooltip(event, tooltipText, alignment, isFullPageContent) {
87088717
tooltip.innerHTML = tooltipText.innerHTML;
87098718
if (isFullPageContent) tooltip.classList.add("full-content-tooltip"); else tooltip.classList.remove("full-content-tooltip");
8710-
var tooltipPos = getTooltipPos(event, tooltipTarget);
8711-
var tooltipArrowLeftShift = 2 * toolTipArrowSize;
8712-
setArrowPosition("--tooltip-arrow-top", -1 * toolTipArrowSize);
8713-
setArrowPosition("--tooltip-arrow-left", tooltipArrowLeftShift + toolTipArrowSize / 2);
8714-
tooltip.style.left = tooltipPos.x - 2 * tooltipArrowLeftShift + "px";
8715-
tooltip.style.top = tooltipPos.y + toolTipArrowSize + "px";
8719+
tooltip.classList.remove("tooltip-align-left", "tooltip-align-center", "tooltip-align-right");
8720+
tooltip.classList.add(alignment);
8721+
setTooltipPos(event, tooltipTarget, alignment);
87168722
shouldShowTooltip = true;
87178723
clearTimeout(hideTimeoutFuncID);
87188724
clearTimeout(showTimeoutFuncID);
@@ -8749,6 +8755,7 @@ $(function() {
87498755
element.appendChild(tooltipText);
87508756
element.addEventListener("mouseover", function(event) {
87518757
var isFullPageContent = element.classList.contains("full-content-tooltip");
8758+
var alignment = element.classList.contains("tooltip-align-left") ? "tooltip-align-left" : element.classList.contains("tooltip-align-center") ? "tooltip-align-center" : "tooltip-align-right";
87528759
tooltipTarget = element;
87538760
if (tooltipText.innerHTML === "") {
87548761
var url = element.href;
@@ -8757,7 +8764,9 @@ $(function() {
87578764
newContent = alterContentForTooltip(newContent, url.isFullPageContent);
87588765
if (newContent.length > 0) {
87598766
tooltipText.innerHTML = newContent;
8760-
showTooltip(event, tooltipText, isFullPageContent);
8767+
setTimeout(() => {
8768+
showTooltip(event, tooltipText, alignment, isFullPageContent);
8769+
}, 0);
87618770
} else {
87628771
hideTooltip(false);
87638772
}
@@ -8771,7 +8780,7 @@ $(function() {
87718780
} else {
87728781
loadContentPartFrom(url, newContent => onSuccess(newContent), error => onError(error));
87738782
}
8774-
} else showTooltip(event, tooltipText, isFullPageContent);
8783+
} else showTooltip(event, tooltipText, alignment, isFullPageContent);
87758784
});
87768785
});
87778786
document.addEventListener("mousemove", function(event) {

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -759,11 +759,11 @@
759759
z-index: 99; /* Higher than anything else */
760760
opacity: 0;
761761

762-
color: $tooltip-color; // #c0c0c0;
762+
color: $tooltip-color;
763763
font-size: $type-size-7;
764764
text-align: left;
765765
//text-shadow: 1px 1px 2px $tooltip-text-shadow-color; // #111
766-
background: $tooltip-background-color; // rgba(51, 51, 51, 0.9);
766+
background: $tooltip-background-color;
767767

768768
// FIXME: Get rid of the dependency on size of the container
769769
width: 500%;
@@ -792,9 +792,9 @@
792792
padding-right: 15px;
793793

794794
border-radius: 5px;
795-
box-shadow: 0 0 3px $tooltip-box-shadow-color; // rgba(0, 0, 0, 0.5);
795+
box-shadow: 0 0 3px $tooltip-box-shadow-color;
796796
-webkit-box-shadow: 0 0 3px $tooltip-box-shadow-color;
797-
//border: 1px solid $tooltip-border-color; // rgba(34, 34, 34, 0.9);
797+
//border: 1px solid $tooltip-border-color
798798

799799
-webkit-transition: all .2s ease-in-out;
800800
-moz-transition: all .2s ease-in-out;
@@ -816,12 +816,12 @@
816816
position: absolute;
817817

818818
// These are for the tooltip arrow parts manipulation and altered from js code as well
819-
top: var(--tooltip-arrow-top, -10px);
819+
top: var(--tooltip-arrow-top, calc(-1 * $tooltip-arrow-half-size));
820820
left: var(--tooltip-arrow-left, 0px);
821821

822-
border-bottom: var(--tooltip-arrow-border-bottom, 10px) solid $tooltip-arrow-background-color; // rgba(51, 51, 51, 0.9);
823-
border-left: var(--tooltip-arrow-border-left, 10px) solid transparent;
824-
border-right: var(--tooltip-arrow-border-right, 10px) solid transparent;
822+
border-bottom: var(--tooltip-arrow-border-bottom, $tooltip-arrow-half-size) solid $tooltip-arrow-background-color;
823+
border-left: var(--tooltip-arrow-border-left, $tooltip-arrow-half-size) solid transparent;
824+
border-right: var(--tooltip-arrow-border-right, $tooltip-arrow-half-size) solid transparent;
825825
}
826826

827827
.tooltip.visible {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ $button-color: $primary-color !default;
9797

9898
$outline-color: rgba($focus-color, 0.5) !default;
9999

100+
$tooltip-arrow-half-size: 10px !default;
100101
$tooltip-background-color: rgba(mix($white, $background-color, 7%), 0.925) !default;
101102
$tooltip-arrow-background-color: $tooltip-background-color !default;
102103
$tooltip-color: mix($gray, $text-color, 50%) !default;

0 commit comments

Comments
 (0)