diff --git a/grade/templates/penalty_indicator.mustache b/grade/templates/penalty_indicator.mustache
index 7720b034f93..581a420218d 100644
--- a/grade/templates/penalty_indicator.mustache
+++ b/grade/templates/penalty_indicator.mustache
@@ -27,7 +27,7 @@
 }}
 
 {{#icon}}
-    <span class="penalty-indicator-icon" title="{{info}}">
+    <span data-bs-toggle="tooltip" class="penalty-indicator-icon" title="{{info}}">
         {{#pix}}{{name}}, {{component}}{{/pix}}
     </span>
 {{/icon}}
@@ -41,3 +41,13 @@
         {{/grademax}}
     </span>
 {{/finalgrade}}
+
+{{#js}}
+require(['theme_boost/bootstrap/tooltip'], function(Tooltip) {
+    // Re-init the tooltip to ensure those dynamically added through AJAX are initialized
+    document.querySelectorAll('.penalty-indicator-icon[data-bs-toggle="tooltip"]').forEach(tooltipElement => {
+        Tooltip.getInstance(tooltipElement)?.dispose();
+        new Tooltip(tooltipElement);
+    });
+});
+{{/js}}
diff --git a/mod/assign/tests/behat/display_grade.feature b/mod/assign/tests/behat/display_grade.feature
index 5eb5609b841..a737dd2578a 100644
--- a/mod/assign/tests/behat/display_grade.feature
+++ b/mod/assign/tests/behat/display_grade.feature
@@ -108,17 +108,17 @@ Feature: Check that the assignment grade can be updated correctly
     When I set the field "Grade out of 100" to "100"
     And I set the field "Notify student" to "0"
     And I press "Save changes"
-    Then the "title" attribute of ".penalty-indicator-icon" "css_element" should contain "Late penalty applied -10.00 marks"
+    Then the "data-bs-original-title" attribute of ".penalty-indicator-icon" "css_element" should contain "Late penalty applied -10.00 marks"
     And I follow "View all submissions"
     And "Student 1" row "Grade" column of "generaltable" table should contain "100.00"
     And "Student 1" row "Final grade" column of "generaltable" table should contain "90.00"
-    And the "title" attribute of ".penalty-indicator-icon" "css_element" should contain "Late penalty applied -10.00 marks"
+    And the "data-bs-original-title" attribute of ".penalty-indicator-icon" "css_element" should contain "Late penalty applied -10.00 marks"
     # Override the grade.
     And I am on the "Course 1" "grades > Grader report > View" page
     And the following should exist in the "user-grades" table:
       | -1-                | -2-                   | -3-       | -4-      |
       | Student 1          | student10@example.com | 90        | 90      |
-    And the "title" attribute of ".penalty-indicator-icon" "css_element" should contain "Late penalty applied -10.00 marks"
+    And the "data-bs-original-title" attribute of ".penalty-indicator-icon" "css_element" should contain "Late penalty applied -10.00 marks"
     And I turn editing mode on
     And I set the following fields to these values:
       | Student 1 Test assignment name grade | 100 |