Use finna-toggletip for search help tooltips.

EreMaijala · Feb 12, 2025 · 4a0fca0 · 4a0fca0
1 parent 8059754
commit 4a0fca0
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 34 deletions.
diff --git a/themes/finna2/scss/finna/tooltip.scss b/themes/finna2/scss/finna/tooltip.scss
@@ -56,7 +56,7 @@
 }
 .tooltip-local-advanced, .tooltip-pci-advanced, .tooltip-eds-advanced, .tooltip-summon-advanced {
   color: $link-color;
-  font-size: .8em;
+  font-size: 1rem;
   @media(max-width: $screen-xs-max) {
     font-weight: 500;
   }

diff --git a/themes/finna2/templates/_ui/components/finna-toggletip.phtml b/themes/finna2/templates/_ui/components/finna-toggletip.phtml
@@ -5,19 +5,23 @@
     'class' => 'finna-toggletip__button',
     'data-toggle' => 'finna-toggletip',
     'data-toggletip-placement' => $placement ?? 'bottom',
-    'data-toggletip-content' => $content ?? '',
+    'data-toggletip-content' => $contentHtml ?? '',
   ]);
-  if (empty($label) && !empty($ariaLabel)) {
+  if (empty($labelHtml) && !empty($ariaLabel)) {
     $__attributes['aria-label'] = $ariaLabel;
   }
   if (!empty($class)) {
     $__attributes->add('class', $class);
   }
+  $__iconClass = 'finna-toggletip__icon';
+  if (!empty($iconClass)) {
+    $__iconClass .= " $iconClass";
+  }
 ?>
 <span class="finna-toggletip">
   <button<?=$__attributes?>>
-    <?php if (!empty($icon)): ?><?=$this->icon($icon, 'finna-toggletip__icon')?><?php endif; ?>
-    <?= $label ?? '' ?>
+    <?php if (!empty($icon)): ?><?=$this->icon($icon, $__iconClass)?><?php endif; ?>
+    <?= $labelHtml ?? '' ?>
   </button>
   <?php
     // Note: role="status" needs to be on the outer element that is never hidden for screen readers to note the change

diff --git a/themes/finna2/templates/primo/advanced.phtml b/themes/finna2/templates/primo/advanced.phtml
@@ -45,7 +45,16 @@
   ?>
   <div class="advanced-search">
     <div id="group1SearchHolder">
-      <h4><?=$this->transEsc('adv_search_label')?><?php if (!$this->translationEmpty('tooltip_pci_advanced_html')): ?><span class="tooltip-pci-advanced pull-right" data-bs-toggle="tooltip" data-placement="bottom" data-html="true" data-original-title='<?=$this->transEsc('tooltip_pci_advanced_html') ?>'><?=$this->icon('info') ?> <?=$this->transEsc('Help with Advanced Search')?></span><?php endif; ?></h4>
+      <h2><?=$this->transEsc('adv_search_label')?>
+        <?php if (!$this->translationEmpty('tooltip_pci_advanced_html')): ?>
+          <?=$this->component('finna-toggletip', [
+            'icon' => 'help',
+            'contentHtml' => $this->translate('tooltip_pci_advanced_html'),
+            'labelHtml' => $this->transEsc('Help with Advanced Search'),
+            'class' => 'tooltip-pci-advanced pull-right',
+          ])?>
+        <?php endif; ?>
+      </h2>
     </div>
 
     <?php for ($i = 0; $i < $numGroups; $i++): ?>

diff --git a/themes/finna2/templates/search/advanced/layout.phtml b/themes/finna2/templates/search/advanced/layout.phtml
@@ -91,21 +91,12 @@
       <div class="header-container">
         <h2><?=$this->transEsc('adv_search_label')?></h2>
         <?php if (!$this->translationEmpty("tooltip_{$tooltipSource}_advanced_html")): ?>
-          <?php
-          $tooltipKey = "tooltip_{$tooltipSource}_advanced_html";
-
-          $tooltipElement = [
-            'class' => 'tooltip-' . $tooltipSource . '-advanced',
-            'data-bs-toggle' => 'tooltip',
-            'data-bs-placement' => 'bottom',
-            'data-bs-html' => 'true',
-            'data-bs-title' => (!$this->translationEmpty($tooltipKey)) ? $this->translate($tooltipKey) : '',
-            'data-bs-trigger' => 'click',
-          ];
-          ?>
-          <button type="button" <?=$this->htmlElement()->getAttributes($tooltipElement)?>><?=$this->icon('help') ?>
-            <span> <?=$this->transEsc('Help with Advanced Search')?> </span>
-          </button>
+          <?=$this->component('finna-toggletip', [
+            'icon' => 'help',
+            'contentHtml' => $this->translate("tooltip_{$tooltipSource}_advanced_html"),
+            'labelHtml' => $this->transEsc('Help with Advanced Search'),
+            'class' => 'tooltip-pci-advanced pull-right',
+          ])?>
         <?php endif; ?>
       </div>
       <input type="hidden" name="sort" value="relevance">

diff --git a/themes/finna2/templates/search/searchTabs.phtml b/themes/finna2/templates/search/searchTabs.phtml
@@ -20,7 +20,7 @@
           $toggletip = [
             'icon' => 'help',
             'ariaLabel' => $this->translate('Help') . ' - ' . $this->translate($tab['label']),
-            'content' => $this->translate($toggletipKeyHtml),
+            'contentHtml' => $this->translate($toggletipKeyHtml),
             'class' => 'tooltip-' . $tab['label'], // for back-compatibility
           ];
         } else {

diff --git a/themes/finna2/templates/search/searchbox.phtml b/themes/finna2/templates/search/searchbox.phtml
@@ -270,18 +270,23 @@
     <?php if (!$browse && !$mainPage && $advSearch): ?>
       <a href="<?=$this->url($advSearch)?>" class="btn btn-link btn-advanced hidden-xs"><?=$this->icon('search-advanced', 'search-advanced-icon') ?><?=$this->transEsc('Advanced Search')?></a>
     <?php endif; ?>
-    <div class="search-tooltip"><?php
-        $searchTypes = ['search' => 'local', 'primo' => 'pci', 'eds' => 'eds', 'summon' => 'summon'];
-        if (isset($searchTypes[$module]) && !$this->translationEmpty('tooltip_' . $searchTypes[$module] . '_search_html')) {
-          $tooltipClass = 'tooltip-search-' . $searchTypes[$module];
-          $tooltipText = $this->translate('tooltip_' . $searchTypes[$module] . '_search_html');
-        }
-        if (isset($tooltipClass) && isset($tooltipText)):
-      ?>
-        <button aria-label="<?= $this->transEsc('Search Tips') ?>" class="tooltip-button <?=$tooltipClass?> hidden-xs" data-bs-toggle="tooltip" data-placement="auto" data-html="true" data-original-title="<?=$this->escapeHtmlAttr($tooltipText)?>">
-          <?=$this->icon('help', 'search-help-icon') ?>
-        </button>
-    <?php endif; ?></div>
+    <?php
+      $searchTypes = ['search' => 'local', 'primo' => 'pci', 'eds' => 'eds', 'summon' => 'summon'];
+      if (
+        ($searchType = $searchTypes[$module] ?? null)
+        && !$this->translationEmpty('tooltip_' . $searchType . '_search_html')
+      ):
+    ?>
+      <div class="search-tooltip">
+        <?=$this->component('finna-toggletip', [
+          'icon' => 'help',
+          'iconClass' => 'search-help-icon',
+          'ariaLabel' => $this->translate('Search Tips'),
+          'contentHtml' => $this->translate('tooltip_' . $searchType . '_search_html'),
+          'class' => 'tooltip-button tooltip-search-' . $searchType, // for back-compatibility
+        ])?>
+      </div>
+    <?php endif; ?>
     <?php if ($module != 'record' && $module != 'collection'): ?>
       <?php if ($browse || $mainPage || ($module === 'authority' && $action === 'search')): ?>
         <div class="search-links">