diff --git a/lib/visual.inc.php b/lib/visual.inc.php index 86efbfb31e576908dc46678b48aa9992155ed0c7..93a892aa1657c2ec98ded0094c1fc8306f9370d9 100644 --- a/lib/visual.inc.php +++ b/lib/visual.inc.php @@ -596,7 +596,12 @@ function tooltipIcon($text, $important = false, $html = false): string // render tooltip $template = $GLOBALS['template_factory']->open('shared/tooltip'); - return $template->render(compact('text', 'important', 'html')); + return $template->render([ + 'text' => $text, + 'important' => $important, + 'html' => $html, + 'tooltip_id' => md5($text) . random_bytes(4) + ]); } /** @@ -608,9 +613,13 @@ function tooltipIcon($text, $important = false, $html = false): string function tooltipHtmlIcon($text, $important = false) { // render tooltip - $html = true; $template = $GLOBALS['template_factory']->open('shared/tooltip'); - return $template->render(compact('text', 'important', 'html')); + return $template->render([ + 'text' => $text, + 'important' => $important, + 'html' => true, + 'tooltip_id' => md5($text) . random_bytes(4) + ]); } /** diff --git a/resources/assets/javascripts/bootstrap/tooltip.js b/resources/assets/javascripts/bootstrap/tooltip.js index c84042b82534486b0700efea51f1fad77c4396bb..034fcf9a9d3c4ed476aa7d36f7fee62d4e4ea375 100644 --- a/resources/assets/javascripts/bootstrap/tooltip.js +++ b/resources/assets/javascripts/bootstrap/tooltip.js @@ -41,7 +41,6 @@ $(document).on('mouseenter mouseleave focusin focusout', '[data-tooltip],.toolti tooltip = new STUDIP.Tooltip(x, y, content); data.tooltipObject = tooltip; - $(this).attr('aria-describedby', tooltip.id); $(this).on('remove', function() { tooltip.remove(); diff --git a/templates/shared/tooltip.php b/templates/shared/tooltip.php index a97c73f275919a6d8639c8d074f8582a7d6673a3..d1ebafaf95a659e1a77a4c8f5105d409df42a024 100644 --- a/templates/shared/tooltip.php +++ b/templates/shared/tooltip.php @@ -1,5 +1,8 @@ -<span class="tooltip tooltip-icon <? if ($important) echo 'tooltip-important'; ?>" data-tooltip <? if (!$html) printf('title="%s"', htmlReady($text)) ?> tabindex="0"> -<? if ($html): ?> - <span class="tooltip-content"><?= $text ?></span> -<? endif; ?> +<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) ?>"> + <? if ($html): ?> + <span class="tooltip-content"><?= $text ?></span> + <? endif; ?> </span> +<span id="tooltip_<?= htmlReady($tooltip_id) ?>" class="sr-only"><?= htmlReady($text) ?></span>