From 5c6ec6c069bd7afb5c09d77b9df0d4fc2f5f365b Mon Sep 17 00:00:00 2001
From: Zachary Keeping <zacharykeeping@icloud.com>
Date: Tue, 28 Nov 2023 11:38:09 +1100
Subject: [PATCH] Add tooltip functionality to ignore buttons in
 HtmlErrorsByReason and HtmlErrorsBySource components

---
 .../HtmlErrorsByReason.svelte                 |  3 +-
 .../HtmlErrorsBySource.svelte                 |  3 +-
 .../misccomponents/TooltipFromAction.svelte   | 31 ++++++++++---------
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/ui/src/components/htmlhintcomponents/HtmlErrorsByReason.svelte b/ui/src/components/htmlhintcomponents/HtmlErrorsByReason.svelte
index 58fc484a..b0db6607 100644
--- a/ui/src/components/htmlhintcomponents/HtmlErrorsByReason.svelte
+++ b/ui/src/components/htmlhintcomponents/HtmlErrorsByReason.svelte
@@ -16,6 +16,7 @@
   import Icon from "../misccomponents/Icon.svelte";
   import { htmlHintRules, customHtmlHintRules } from "../../../../docker/rules.js";
   import LoadingCircle from "../misccomponents/LoadingCircle.svelte";
+  import { tooltip } from '../misccomponents/tooltip';
 
   export let errors = [];
   export let codeIssues = [];
@@ -136,7 +137,7 @@
         <tr>
           <th class="w-2/12 px-4 py-2">Page ({error.pages.length})</th>
           <th class="w-9/12 px-4 py-2">Locations (line:col)</th>
-          <th class="w-1/12 px-4 py-2">Ignore</th>
+          <th class="w-1/12 px-4 py-2" title="Ignore URL for this rule in future scans" use:tooltip>Ignore</th>
         </tr>
       </thead>
       <tbody>
diff --git a/ui/src/components/htmlhintcomponents/HtmlErrorsBySource.svelte b/ui/src/components/htmlhintcomponents/HtmlErrorsBySource.svelte
index 61e274df..a4a544f2 100644
--- a/ui/src/components/htmlhintcomponents/HtmlErrorsBySource.svelte
+++ b/ui/src/components/htmlhintcomponents/HtmlErrorsBySource.svelte
@@ -13,6 +13,7 @@
   import { createEventDispatcher } from "svelte";
   import Icon from "../misccomponents/Icon.svelte";
   import LoadingCircle from "../misccomponents/LoadingCircle.svelte";
+  import { tooltip } from '../misccomponents/tooltip';
 
   export let errors = [];
   export let codeIssues = [];
@@ -115,7 +116,7 @@
             Issues ({Object.keys(url.errors).length})
           </th>
           <th class="w-9/12 px-4 py-2">Locations</th>
-          <th class="w-1/12 px-4 py-2">Ignore</th>
+          <th class="w-1/12 px-4 py-2" title="Ignore rule on this URL in future scans" use:tooltip>Ignore</th>
         </tr>
       </thead>
       <tbody>
diff --git a/ui/src/components/misccomponents/TooltipFromAction.svelte b/ui/src/components/misccomponents/TooltipFromAction.svelte
index 0db2b111..105544e9 100644
--- a/ui/src/components/misccomponents/TooltipFromAction.svelte
+++ b/ui/src/components/misccomponents/TooltipFromAction.svelte
@@ -1,19 +1,20 @@
 <script>
-	export let title;
-	export let x;
-	export let y;
+  export let title;
+  export let x;
+  export let y;
 </script>
-<div style="
-		top: {y + 5}px;
-		left: {x + 5}px;">{title}</div>
+
+<div style="top: {y + 5}px; left: {x + 5}px;">
+  <i class="fa-solid fa-circle-info text-blue-600"></i> {title}
+</div>
 
 <style>
-	div {
-		border: 1px solid #ddd;
-		box-shadow: 1px 1px 1px #ddd;
-		background: white;
-		border-radius: 4px;
-		padding: 4px;
-		position: absolute;
-	}
-</style>
\ No newline at end of file
+  div {
+    border: 1px solid #ddd;
+    box-shadow: 1px 1px 1px #ddd;
+    background: white;
+    border-radius: 4px;
+    padding: 4px;
+    position: absolute;
+  }
+</style>