diff --git a/resources/assets/javascripts/bootstrap/tooltip.js b/resources/assets/javascripts/bootstrap/tooltip.js
index 5a41f2f41db3511b79ef9231cb43a2dc374c44ef..2a7d2f96555dc9ae987cf073a1c1fd8304401cf3 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 7566438c5c6f0376f1882696eff112ea2b6e29d7..66092a3500b2460d9c646fdcf6697581423de574 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 4d9ab5f790f0d2b0ff647f037aac7da75b0f944f..89b09da29503a2ed5ec8bbbdeec8a7497e7dd9c5 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>