fixed screen reader output for tooltips, fixes #3962issue-4224-2issue-4224

Closes #3962

Merge request studip/studip!2859

1 files changed, 6 insertions, 4 deletions

diff --git a/resources/assets/stylesheets/scss/tooltip.scss b/resources/assets/stylesheets/scss/tooltip.scss
index 4b7b36b..ac570a8 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;
@@ -38,11 +38,13 @@
         @extend %tooltip;
         display: none;
     }
-    &:hover .tooltip-content {
+
+    &:hover .tooltip-content,
+    &:focus .tooltip-content {
         bottom: 100%;
         display: inline-block;
         left: 50%;
-        margin-left: -129px;
-        width: 230px;
+        margin-left: - calc($grid-element-width / 2) - 10px;
+        width: $grid-element-width;
     }
 }