Fix tooltips for BS5 (#1777)

Move tooltip functionality to js for BS5. Force cypress to type to bypass tooltip
artefactual · May 16, 2024 · 13a78e2 · 13a78e2
1 parent 1da71a7
commit 13a78e2
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/cypress/e2e/descriptions.cy.js b/cypress/e2e/descriptions.cy.js
@@ -7,7 +7,7 @@ describe('Descriptions', () => {
     cy.visit('/informationobject/add')
     cy.contains('Identity area').click()
     cy.get('input#identifier').type('123')
-    cy.get('input#title').type('Test description A')
+    cy.get('input#title').type('Test description A', {force: true})
     cy.get('#main-column form').submit()
 
     cy.get('#main-column > h1').contains('123 - Test description A')

diff --git a/plugins/arDominionB5Plugin/js/tooltip.js b/plugins/arDominionB5Plugin/js/tooltip.js
@@ -1,5 +1,18 @@
 import Tooltip from "bootstrap/js/dist/tooltip";
 
-document
-  .querySelectorAll("[data-bs-toggle=tooltip]")
-  .forEach((element) => new Tooltip(element));
+(($) => {
+  "use strict";
+
+  $(() => {
+    $("body.edit.show-edit-tooltips [id$=-help]").each((_, el) => {
+      $(el).prevAll(":not([type=hidden]):first").attr({
+        title: el.textContent.trim(),
+        "data-bs-toggle": "tooltip",
+        "data-bs-trigger": "focus",
+        "data-bs-placement": "left",
+      });
+    });
+
+    $("[data-bs-toggle=tooltip]").each((_, el) => new Tooltip(el));
+  });
+})(jQuery);
diff --git a/plugins/arDominionB5Plugin/scss/_forms.scss b/plugins/arDominionB5Plugin/scss/_forms.scss
@@ -94,3 +94,7 @@ ul.multiInput,
 .form-required {
   color: $primary;
 }
+
+body.edit [id$="-help"] {
+  display: none;
+}
diff --git a/plugins/arDominionB5Plugin/templates/_layout_start_webpack.php b/plugins/arDominionB5Plugin/templates/_layout_start_webpack.php
@@ -9,7 +9,7 @@
     <%= htmlWebpackPlugin.tags.headTags %>
     <?php echo get_component_slot('css'); ?>
   </head>
-  <body class="d-flex flex-column min-vh-100 <?php echo $sf_context->getModuleName(); ?> <?php echo $sf_context->getActionName(); ?>">
+  <body class="d-flex flex-column min-vh-100 <?php echo $sf_context->getModuleName(); ?> <?php echo $sf_context->getActionName(); ?><?php echo sfConfig::get('app_show_tooltips') ? ' show-edit-tooltips' : ''; ?>">
     <?php echo get_component('default', 'tagManager', ['code' => 'noscript']); ?>
     <?php echo get_partial('header'); ?>
     <?php include_slot('pre'); ?>