Merge pull request #794 from SSWConsulting/tooltip-icon

Add info icon to tooltips
SSWConsulting · Nov 28, 2023 · 8cba888 · 8cba888
2 parents cfa8b06 + 5c6ec6c
commit 8cba888
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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>
+  div {
+    border: 1px solid #ddd;
+    box-shadow: 1px 1px 1px #ddd;
+    background: white;
+    border-radius: 4px;
+    padding: 4px;
+    position: absolute;
+  }
+</style>