diff --git a/lib/visual.inc.php b/lib/visual.inc.php index d578587b3ac2c6b5d1681fd20e30de86d446caf4..ae1f9d89bfca4d8dbdfbe9a176a7dbc713d57ecb 100644 --- a/lib/visual.inc.php +++ b/lib/visual.inc.php @@ -623,6 +623,7 @@ function tooltip2($text, $with_alt = TRUE, $with_popup = FALSE) { $ret['alt'] = $text; } $ret['title'] = $text; + $ret['tabindex'] = '0'; return $ret; } diff --git a/resources/assets/javascripts/bootstrap/tooltip.js b/resources/assets/javascripts/bootstrap/tooltip.js index 8f97d6cbf369d09d363be167b07aeffa5ced3f70..d99879ce5919df16de809c62c27f634b99756dd3 100644 --- a/resources/assets/javascripts/bootstrap/tooltip.js +++ b/resources/assets/javascripts/bootstrap/tooltip.js @@ -10,10 +10,10 @@ var timeout = null; STUDIP.Tooltip.threshold = 6; -$(document).on('mouseenter mouseleave', '[data-tooltip],.tooltip:has(.tooltip-content)', function(event) { +$(document).on('mouseenter mouseleave focusin focusout', '[data-tooltip],.tooltip:has(.tooltip-content)', function(event) { let data = $(this).data(); - const visible = event.type === 'mouseenter'; + const visible = event.type === 'mouseenter' || event.type === 'focusin'; const offset = $(this).offset(); const x = offset.left + $(this).outerWidth(true) / 2; const y = offset.top; @@ -61,8 +61,8 @@ $(document).on('mouseenter mouseleave', '[data-tooltip],.tooltip:has(.tooltip-co } else { timeout = setTimeout(() => data.tooltipObject.hide(), delay); } -}).on('mouseenter', '.studip-tooltip', () => { +}).on('mouseenter focusin', '.studip-tooltip', () => { clearTimeout(timeout); -}).on('mouseleave', '.studip-tooltip', function() { +}).on('mouseleave focusout', '.studip-tooltip', function() { $(this).hide(); }); diff --git a/templates/shared/tooltip.php b/templates/shared/tooltip.php index 3443c98c3bdf2d905eab43bf770a0de4947d708a..a97c73f275919a6d8639c8d074f8582a7d6673a3 100644 --- a/templates/shared/tooltip.php +++ b/templates/shared/tooltip.php @@ -1,4 +1,4 @@ -<span class="tooltip tooltip-icon <? if ($important) echo 'tooltip-important'; ?>" data-tooltip <? if (!$html) printf('title="%s"', htmlReady($text)) ?>> +<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; ?>