Better tooltips

Author: vizzdoom

app.js

@@ -851,13 +851,13 @@ class SQLMapGenerator {
 
 // Initialize the application when DOM is loaded
 let sqlgen = null;
-document.addEventListener('DOMContentLoaded', () => {
-    sqlgen = new SQLMapGenerator();
-    document.querySelectorAll('input[type=text], textarea').forEach(field => field.spellcheck = false);
-
-    document.querySelectorAll('em.tooltip').forEach(el => {
-        const text = el.textContent;
-        el.textContent = '';
-        el.dataset.tooltip = text;
-    });
-});
+document.addEventListener('DOMContentLoaded', () => {
+    sqlgen = new SQLMapGenerator();
+    document.querySelectorAll('input[type=text], textarea').forEach(field => field.spellcheck = false);
+
+    // document.querySelectorAll('em.tooltip').forEach(el => {
+    //     const text = el.textContent;
+    //     el.textContent = '';
+    //     el.dataset.tooltip = text;
+    // });
+});

sql-command-builder.html

@@ -57,7 +57,8 @@ <h1><a href="?">SQLMap Command Builder</a></h1>
                         <div class="form-grid">
                             <!-- -u -->
                             <div class="form-group">
-                                <label class="form-label" for="url">TARGET URL<em class="tooltip">Target URL (e.g. http://127.0.0.1/vuln.php?id=1)</em><br/><span>-u</span></label>
+                                <label class="form-label" for="url">TARGET URL<i tooltip="Target URL (e.g. http://127.0.0.1/vuln.php?id=1)">ⁱ</i></label>
+                                <label class="form-label" for="url"><u>-u</u></label>
                                 <input type="url" id="url" class="form-control" placeholder="https://127.0.0.1/page?id=1">
                             </div>
                             <!-- -d -->

style.css

@@ -47,6 +47,7 @@
   /* Typography */
   --font-family-base: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --font-family-mono: 'Courier New', monospace;
+  --font-size-xxs: 10px;
   --font-size-xs: 11px;
   --font-size-s: 12px;
   --font-size-m: 14px;
@@ -65,6 +66,7 @@
 
   /* Spacing */
   --space-0:    0;
+  --space-xxs:  3px;
   --space-xs:   6px;
   --space-s:    12px;
   --space-m:    14px;
@@ -456,18 +458,76 @@ pre code {
 }
 
 .form-label {
+  user-select: none;
   color: var(--hacker-primary);
   font-weight: bold;
-  margin-bottom: var(--space-s);
+  margin-bottom: var(--space-xxs);
   font-size: var(--font-size-s);
   letter-spacing: 0.7px;
 }
 
-.form-label span, .checkbox-label span {
+.form-label u, .checkbox-label u {
   font-weight: normal;;
   color: var(--hacker-secondary);
+  text-decoration: none;
+}
+
+.form-label i {
+  position: relative;
+  display: inline-block;
+  margin-left: var(--space-xs);
+  cursor: pointer;
+  font-style: normal;
+  color: var(--hacker-secondary);
+}
+
+.form-label i:hover::after {
+  color: var(--hacker-primary);
+
+}
+
+.form-label i::before {
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-normal);
+  color: var(--hacker-secondary);
+  padding: var(--space-s);
+  border: 1px solid var(--hacker-secondary);
+  box-shadow: 8px 8px 0px 0px var(--hacker-primary);
+  background: var(--hacker-bg-dark);
+
+  position: absolute;
+  bottom: calc(100% + var(--space-2xl));
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: var(--radius-m);
+  white-space: normal;
+  overflow-wrap: break-word;
+  width: max-content;
+  max-width: min(30rem, calc(100vw - 2rem));
+  box-sizing: border-box;
+  visibility: hidden;
+  display: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: 1000;
 }
 
+.form-label i:hover::before {
+  display: block;
+  opacity: 1;
+  visibility: visible;
+}
+
+.form-label [tooltip]::before {
+  content: attr(tooltip);
+  white-space: pre-line;
+}
+
+.form-label i:hover::before {
+  display: block;
+  opacity: 1;
+  visibility: visible;
+}
 
 .form-control:focus {
   border-color: var(--hacker-primary);
@@ -787,6 +847,10 @@ select.form-control {
   padding-left: var(--space-3xl);
 }*/
 
+input, select, textarea {
+  margin-top: var(--space-xs);
+}
+
 .checkbox-label input[type="checkbox"], .checkbox-label-tamper input[type="checkbox"] {
   position: absolute;
   opacity: 0;
@@ -957,66 +1021,10 @@ select.form-control {
 input[type=number] { 
   -moz-appearance: textfield;
   appearance: textfield;
-  margin: 0; 
 }
 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button { 
       -webkit-appearance: none; 
-      margin: 0; 
-}
-
-/* Tooltip styles */
-.tooltip,
-[title] {
-  position: relative;
-  display: inline-block;
-  margin-left: var(--space-xs);
-  cursor: pointer;
-  font-style: normal;
-  color: var(--hacker-secondary);
-}
-
-.tooltip::before {
-  content: "ⁱ";
-  font-size: 0.9em;
-  line-height: 1;
-  transition: color 0.2s ease;
-}
-
-.tooltip:hover::before {
-  color: var(--hacker-primary);
-
-}
-
-.tooltip::after,
-[title]::after {
-  position: absolute;
-  bottom: calc(100% + var(--space-2xl));
-  left: 50%;
-  transform: translateX(-50%);
-  background: var(--hacker-bg-dark-opacity);
-  color: var(--hacker-secondary);
-  padding: var(--space-s);
-  border-radius: var(--radius-m);
-  font-size: var(--font-size-m);
-  white-space: normal;
-  overflow-wrap: break-word;
-  width: max-content;
-  max-width: min(30rem, calc(100vw - 2rem));
-  box-sizing: border-box;
-  opacity: 0;
-  visibility: hidden;
-  display: none;
-  transition: opacity 0.3s ease;
-  border: 1px solid var(--hacker-border);
-  z-index: 1000;
-  box-shadow: 6px 6px 0px 0px, 0 0 5000px 5000px #00000070;
-}
-
-.tooltip:hover::after {
-  display: block;
-  opacity: 1;
-  visibility: visible;
 }
 
 .additional-help {
@@ -1033,13 +1041,3 @@ input[type=number]::-webkit-outer-spin-button {
 
 }
 
-[title]::after {
-  content: attr(title);
-}
-
-.tooltip:hover::after,
-[title]:hover::after {
-  display: block;
-  opacity: 1;
-  visibility: visible;
-}