fix(frontend): The line break in the tooltips

Fix the line break in the tooltips of public statistics.

Bootstrap5 uses data-bs-* instead of data-*, so `data-html` should be
replaced by `data-bs-html`. After that, <br/> can be shown as a line
break correctly.

Also, all the tooltips should be initialized by js. This is already done
in `domjudge.js`, but it's also outdated.

See also: https://getbootstrap.com/docs/5.0/migration/#javascript

Closes #2613

Signed-off-by: cubercsl <[email protected]>

Author: cubercsl

webapp/public/js/domjudge.js

@@ -823,7 +823,7 @@ function setupPreviewClarification($input, $previewDiv, previewInitial) {
 }
 
 $(function () {
-    $('[data-toggle="tooltip"]').tooltip();
+    $('[data-bs-toggle="tooltip"]').tooltip();
 });
 
 function initializeKeyboardShortcuts() {

webapp/templates/jury/analysis/contest_overview.html.twig

@@ -36,7 +36,7 @@ table tr a {
           Contest Stats
         </div>
         <div class="card-body">
-          <abbr data-bs-toggle="popover" data-placement="bottom" data-bs-title="Misery Index" data-bs-content="
+          <abbr data-bs-toggle="popover" data-bs-placement="bottom" data-bs-title="Misery Index" data-bs-content="
             This is a measure of how 'bored' contestants are. It is the average number of
             people-minutes spent fruitlessly trying to solve problems at the end of the contest.
             <br>

webapp/templates/jury/entity_id_badge.html.twig

@@ -1,4 +1,4 @@
-<span class="badge text-bg-secondary id-badge" data-bs-toggle="tooltip" data-placement="top" title="{% if label is defined and label | length %}Label: {{ label }}, {% endif %}{% if externalId is not null %}External ID: {{ externalId }}, {% endif %}Internal ID: {{ idPrefix }}{{ id }}">
+<span class="badge text-bg-secondary id-badge" data-bs-toggle="tooltip" data-bs-placement="top" title="{% if label is defined and label | length %}Label: {{ label }}, {% endif %}{% if externalId is not null %}External ID: {{ externalId }}, {% endif %}Internal ID: {{ idPrefix }}{{ id }}">
     {% if label is defined and label | length %}
         {{ label }}
     {% elseif externalId is not null %}

webapp/templates/partials/problem_list.html.twig

@@ -92,8 +92,8 @@
                                                             <div
                                                                 class="problem-stats-item {{ itemClass }}"
                                                                 data-bs-toggle="tooltip"
-                                                                data-placement="top"
-                                                                data-html="true"
+                                                                data-bs-placement="top"
+                                                                data-bs-html="true"
                                                                 title="Between {{ stat.start.timestamp | printtime(null, contest) }} and {{ stat.end.timestamp | printtime(null, contest) }}:<br/>{{ label }}">
                                                             </div>
                                                         {% endfor %}