From 93bcc22fc6e8688b265e5cd2c7c5aa72efa28ee2 Mon Sep 17 00:00:00 2001
From: Moritz Strohm <strohm@data-quest.de>
Date: Mon, 22 Apr 2024 17:01:11 +0200
Subject: [PATCH] removed unnecessary code from bootstrap/tooltip.js
---
.../assets/javascripts/bootstrap/tooltip.js | 50 +++----------------
.../assets/stylesheets/scss/tooltip.scss | 6 +--
templates/shared/tooltip.php | 5 +-
3 files changed, 12 insertions(+), 49 deletions(-)
diff --git a/resources/assets/javascripts/bootstrap/tooltip.js b/resources/assets/javascripts/bootstrap/tooltip.js
index 5a41f2f41db..2a7d2f96555 100644
--- a/resources/assets/javascripts/bootstrap/tooltip.js
+++ b/resources/assets/javascripts/bootstrap/tooltip.js
@@ -1,7 +1,7 @@
// Attach global hover handler for tooltips.
// Applies to all elements having a "data-tooltip" attribute.
// Tooltip may be provided in the data-attribute itself or by
-// defining a title attribute. The latter is prefered due to
+// defining a title attribute. The latter is preferred due to
// the obvious accessibility issues.
var timeout = null;
@@ -10,58 +10,22 @@ STUDIP.Tooltip.threshold = 6;
$(document).on('mouseenter mouseleave focusin focusout', '[data-tooltip],.tooltip:has(.tooltip-content)', function(event) {
let data = $(this).data();
-
const visible = event.type === 'mouseenter' || event.type === 'focusin';
const offset = $(this).offset();
const x = offset.left + $(this).outerWidth(true) / 2;
const y = offset.top;
const delay = data.tooltipDelay ?? 300;
- let content;
- let tooltip;
-
if (!data.tooltipObject) {
- // If tooltip has not yet been created (first hover), obtain it's
- // contents and create the actual tooltip object.
- if (!data.tooltip || !$.isPlainObject(data.tooltip)) {
- let describing_element = $('#' + $(this).attr('aria-describedby'));
- content = $('<div/>').text(data.tooltip || $(this).attr('title')).html();
- if (!content && describing_element) {
- content = $(describing_element).html();
- }
- } else if (data.tooltip.html !== undefined) {
- content = data.tooltip.html;
- } else if (data.tooltip.text !== undefined) {
- content = data.tooltip.text;
- } else {
- throw "Invalid content for tooltip via data";
- }
- if (!content) {
- content = $(this).closest('.tooltip-content').html();
- }
- $(this).attr('title', null);
- $(this).attr('data-tooltip', content);
-
- tooltip = new STUDIP.Tooltip(x, y, content);
-
- data.tooltipObject = tooltip;
-
- $(this).on('remove', function() {
- tooltip.remove();
- });
- } else if (visible) {
- // If tooltip has already been created, update it's position.
- // This is neccessary if the surrounding content is scrollable AND has
- // been scrolled. Otherwise the tooltip would appear at it's previous
- // and now wrong location.
- data.tooltipObject.position(x, y);
+ data.tooltipObject = new STUDIP.Tooltip(x, y, $(this).children('.tooltip-content').first().html());
}
if (visible) {
- $('.studip-tooltip').not(data.tooltipObject).hide();
- data.tooltipObject.show();
- } else {
- timeout = setTimeout(() => data.tooltipObject.hide(), delay);
+ // If tooltip has already been created, update its position.
+ // This is necessary if the surrounding content is scrollable AND has
+ // been scrolled. Otherwise, the tooltip would appear at its previous
+ // and now wrong location.
+ data.tooltipObject.position(x, y);
}
}).on('mouseenter focusin', '.studip-tooltip', () => {
clearTimeout(timeout);
diff --git a/resources/assets/stylesheets/scss/tooltip.scss b/resources/assets/stylesheets/scss/tooltip.scss
index 7566438c5c6..66092a3500b 100644
--- a/resources/assets/stylesheets/scss/tooltip.scss
+++ b/resources/assets/stylesheets/scss/tooltip.scss
@@ -7,7 +7,7 @@
box-shadow: 0 1px 0 fade-out($white, 0.5) inset;
font-size: var(--font-size-base);
margin-bottom: 8px;
- max-width: 230px;
+ max-width: $grid-element-width;
padding: 10px;
position: absolute;
text-align: left;
@@ -34,11 +34,11 @@
@include icon(before, info-circle, attention);
}
- & + .tooltip-content {
+ .tooltip-content {
@extend %tooltip;
display: none;
}
- &:hover + .tooltip-content {
+ &:hover .tooltip-content, &:focus .tooltip-content {
bottom: 100%;
display: inline-block;
left: 50%;
diff --git a/templates/shared/tooltip.php b/templates/shared/tooltip.php
index 4d9ab5f790f..89b09da2950 100644
--- a/templates/shared/tooltip.php
+++ b/templates/shared/tooltip.php
@@ -1,5 +1,4 @@
<span class="tooltip tooltip-icon <? if ($important) echo 'tooltip-important'; ?>"
- data-tooltip <? if (!$html) printf('title="%s"', htmlReady($text)) ?>
- tabindex="0" aria-describedby="tooltip_<?= htmlReady($tooltip_id) ?>">
+ tabindex="0">
+ <span class="tooltip-content"><?= $html ? $text : htmlReady($text) ?></span>
</span>
-<span id="tooltip_<?= htmlReady($tooltip_id) ?>" class="tooltip-content"><?= htmlReady($text) ?></span>
--
GitLab