From 32745bdc386b65bfb85858a9d5415f35ee37d8ed Mon Sep 17 00:00:00 2001
From: Jan Rodak <hony.com@seznam.cz>
Date: Fri, 26 Jan 2024 13:56:53 +0100
Subject: [PATCH] Add tool tip to search bar

---
 .../report_generators/html_templates/css/style.css   | 12 ++++++++++++
 .../html_templates/search_input.html                 | 10 +++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/openscap_report/report_generators/html_templates/css/style.css b/openscap_report/report_generators/html_templates/css/style.css
index 6afafc10..8802397b 100644
--- a/openscap_report/report_generators/html_templates/css/style.css
+++ b/openscap_report/report_generators/html_templates/css/style.css
@@ -175,6 +175,18 @@ footer {
     border-radius: 0px !important;
 }
 
+.tooltip-box-bottom-side {
+    visibility: hidden;
+    position: absolute;
+    top: 120%;
+    left: 15%;
+}
+
+.tooltip-wrapper:hover .tooltip-box-bottom-side {
+    visibility: visible;
+    z-index: calc(var(--pf-c-tree-view--m-guides__list-item--ZIndex) + 1);
+}
+
 .tooltip-box-right-side {
     visibility: hidden;
     position: absolute;
diff --git a/openscap_report/report_generators/html_templates/search_input.html b/openscap_report/report_generators/html_templates/search_input.html
index 111f6ce3..338c4107 100644
--- a/openscap_report/report_generators/html_templates/search_input.html
+++ b/openscap_report/report_generators/html_templates/search_input.html
@@ -1,7 +1,7 @@
 {# Copyright 2022, Red Hat, Inc. #}
 {# SPDX-License-Identifier: LGPL-2.1-or-later #}
 <div class="pf-c-accordion pf-m-display-lg">
-    <div class="pf-c-input-group">
+    <div class="pf-c-input-group tooltip-wrapper" style="position: relative;">
         <input class="pf-c-form-control pf-m-search" oninput="search_rule(this)" type="search"
             placeholder="Search rule" id="input-search-rule" />
         <button class="pf-c-button pf-m-control" type="button" aria-label="Clear" onclick="clear_input(this)">
@@ -11,6 +11,14 @@
             onclick="show_advanced_options(this);">
             <i class="fas fa-caret-right" aria-hidden="true"></i>
         </button>
+        <div class="pf-c-tooltip pf-m-bottom tooltip-box-bottom-side" role="tooltip">
+            <div class="pf-c-tooltip__arrow"></div>
+            <div class="pf-c-tooltip__content tooltip__content-width">
+                You can search for rules by ID, name, references, or policy name.
+                To specify policy and reference, you can enter a search bar in the format: <i>POLICY_NAME: REFERENCE</i><br>
+                To filter rules by result or severity, you can use advanced filtering by clicking the arrow on the right side of the search bar.
+            </div>
+        </div>
     </div>
     <div class="pf-c-accordion__expanded-content" style="display: none;">
         <div class="pf-c-accordion__expanded-content-body">