changed HTML of tooltips

resources/assets/javascripts/bootstrap/tooltip.js

@@ -33,7 +33,7 @@ $(document).on('mouseenter mouseleave focusin focusout', '[data-tooltip],.toolti
             throw "Invalid content for tooltip via data";
         }
         if (!content) {
-            content = $(this).find('.tooltip-content').remove().html();
+            content = $(this).closest('.tooltip-content').html();
         }
         $(this).attr('title', null);
         $(this).attr('data-tooltip', content);

resources/assets/stylesheets/scss/tooltip.scss

@@ -34,11 +34,11 @@
         @include icon(before, info-circle, attention);
     }
 
-    .tooltip-content {
+    & + .tooltip-content {
         @extend %tooltip;
         display: none;
     }
-    &:hover .tooltip-content {
+    &:hover + .tooltip-content {
         bottom: 100%;
         display: inline-block;
         left: 50%;

templates/shared/tooltip.php

 <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>
+<span id="tooltip_<?= htmlReady($tooltip_id) ?>" class="tooltip-content"><?= htmlReady($text) ?></span>