Skip to content

Commit 8cf84a4

Browse files
vizzdoomvizzdoom
authored
Add tooltip icons (#12)
* Add tooltip icons * Replace title tooltips with hover icons * Better tooltips
1 parent d3467a8 commit 8cf84a4

File tree

3 files changed

+61
-26
lines changed

3 files changed

+61
-26
lines changed

‎app.js

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -851,7 +851,13 @@ class SQLMapGenerator {
851851

852852
// Initialize the application when DOM is loaded
853853
let sqlgen = null;
854-
document.addEventListener('DOMContentLoaded', () => {
855-
sqlgen = new SQLMapGenerator();
856-
document.querySelectorAll('input[type=text], textarea').forEach(field => field.spellcheck = false);
857-
});
854+
document.addEventListener('DOMContentLoaded', () => {
855+
sqlgen = new SQLMapGenerator();
856+
document.querySelectorAll('input[type=text], textarea').forEach(field => field.spellcheck = false);
857+
858+
document.querySelectorAll('em.tooltip').forEach(el => {
859+
const text = el.textContent;
860+
el.textContent = '';
861+
el.dataset.tooltip = text;
862+
});
863+
});

‎sql-command-builder.html

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -56,13 +56,13 @@ <h1><a href="?">SQLMap Command Builder</a></h1>
5656
<div class="card__body">
5757
<div class="form-grid">
5858
<!-- -u -->
59-
<div class="form-group" title="Target URL (e.g. http://127.0.0.1/vuln.php?id=1)">
60-
<label class="form-label" for="url">TARGET URL<br/><span>-u</span></label>
59+
<div class="form-group">
60+
<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>
6161
<input type="url" id="url" class="form-control" placeholder="https://127.0.0.1/page?id=1">
6262
</div>
6363
<!-- -d -->
64-
<div class="form-group" title="Connection string for direct database connection">
65-
<label class="form-label" for="directDb">DATABASE CONNECTION STRING<br/><span>-d</span></label>
64+
<div class="form-group">
65+
<label class="form-label" for="directDb">DATABASE CONNECTION STRING<em class="tooltip">Connection string for direct database connection</em><br/><span>-d</span></label>
6666
<input type="text" id="directDb" class="form-control" placeholder="mysql://user:pass@host/db">
6767
</div>
6868
<!-- -g -->
@@ -174,20 +174,18 @@ <h3>Proxy Options</h3>
174174
<input type="number" id="proxyFreq" class="form-control" min="1" step="1" placeholder="3">
175175
</div>
176176
<!-- --ignore-proxy -->
177-
<div class="form-group row-expand" title="Run sqlmap against a target part of a local area network by ignoring the system-wide set HTTP(S) proxy server setting.">
178-
<label class="form-label">IGNORE SYSTEM PROXY SETTINGS</label>
177+
<div class="form-group row-expand">
178+
<label class="form-label">IGNORE SYSTEM PROXY SETTINGS<em class="tooltip">Run sqlmap against a target part of a local area network by ignoring the system-wide set HTTP(S) proxy server setting.</em></label>
179179
<label class="checkbox-label">
180180
<input type="checkbox" id="proxyIgnore">
181181
<span class="checkmark"></span>
182182
<span class="checkbox-label__text">--ignore-proxy</span>
183183
</label>
184184
</div>
185-
<div class="form-group" title="If, for any reason, you need to stay anonymous, instead of passing by a single predefined HTTP(S) proxy server, you can configure a Tor client together with Privoxy (or similar) on your machine as explained in Tor installation guides.
186-
Then you can use a switch --tor and sqlmap will try to automatically set Tor proxy connection settings.
187-
You are strongly advised to use --check-tor occasionally to be sure that everything was set up properly - sqlmap will check that everything works as expected by sending a single request to an official Are you using Tor? page before any target requests.">
185+
<div class="form-group">
188186
<!-- --tor -->
189187
<div class="checkbox-grid">
190-
<label class="form-label">TOR ANONYMITY NETWORK SETTINGS</label>
188+
<label class="form-label">TOR ANONYMITY NETWORK SETTINGS<em class="tooltip">If, for any reason, you need to stay anonymous, instead of passing by a single predefined HTTP(S) proxy server, you can configure a Tor client together with Privoxy (or similar) on your machine as explained in Tor installation guides. Then you can use a switch --tor and sqlmap will try to automatically set Tor proxy connection settings. You are strongly advised to use --check-tor occasionally to be sure that everything was set up properly - sqlmap will check that everything works as expected by sending a single request to an official Are you using Tor? page before any target requests.</em></label>
191189
<label class="checkbox-label">
192190
<input type="checkbox" id="tor">
193191
<span class="checkmark"></span>
@@ -628,7 +626,7 @@ <h3>Attack Optimalization</h3>
628626
</div>
629627
<!-- Attack tuning -->
630628
<div class="form-group">
631-
<label class="form-label" title="Connection optimization - using persistent HTTP(s) connections">ATTACK TUNING</label>
629+
<label class="form-label">ATTACK TUNING<em class="tooltip">Connection optimization - using persistent HTTP(s) connections</em></label>
632630
<div class="checkbox-grid">
633631
<!-- --invalid-bignum -->
634632
<label class="checkbox-label" title="This parameter forces sqlmap to use large integer numbers for invalidating original parameter values during SQL injection tests.
@@ -655,13 +653,10 @@ <h3>Attack Optimalization</h3>
655653
<span>--invalid-string</span>
656654
</label>
657655
<!-- --no-cast -->
658-
<label class="checkbox-label" title="The switch disables sqlmap's automatic payload casting mechanism.
659-
Normally sqlmap adds CAST() functions to payloads for handling different DBMS data types.
660-
Using --no-cast is necessary when applications have payload length restrictions or when casting functions are blocked by WAF. It significantly reduces the size of generated payloads, which is critical in environments with character limits.
661-
It is often combined with --no-escape in environments with query length restrictions where every character matters.">
656+
<label class="checkbox-label">
662657
<input type="checkbox" id="noCast">
663658
<span class="checkmark"></span>
664-
<span>--no-cast</span>
659+
<span>--no-cast</span><em class="tooltip">The switch disables sqlmap's automatic payload casting mechanism. Normally sqlmap adds CAST() functions to payloads for handling different DBMS data types. Using --no-cast is necessary when applications have payload length restrictions or when casting functions are blocked by WAF. It significantly reduces the size of generated payloads, which is critical in environments with character limits. It is often combined with --no-escape in environments with query length restrictions where every character matters.</em>
665660
</label>
666661
<!-- --no-escape -->
667662
<label class="checkbox-label" title="This parameter disables sqlmap's built-in string escaping mechanism.
@@ -856,10 +851,10 @@ <h3>Attack Optimalization</h3>
856851
<span class="checkmark"></span>
857852
<span>--statements</span>
858853
</label>
859-
<label class="checkbox-label" title="Retrieve SQL statements being run on DBMS">
854+
<label class="checkbox-label">
860855
<input type="checkbox" id="tables">
861856
<span class="checkmark"></span>
862-
<span>--tables</span>
857+
<span>--tables</span><em class="tooltip">Retrieve SQL statements being run on DBMS</em>
863858
</label>
864859
<label class="checkbox-label" title="Enumerate DBMS users">
865860
<input type="checkbox" id="users">

‎style.css

Lines changed: 38 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -468,6 +468,7 @@ pre code {
468468
color: var(--hacker-secondary);
469469
}
470470

471+
471472
.form-control:focus {
472473
border-color: var(--hacker-primary);
473474
box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
@@ -968,20 +969,36 @@ input[type=number]::-webkit-outer-spin-button {
968969
.tooltip,
969970
[title] {
970971
position: relative;
972+
display: inline-block;
973+
margin-left: var(--space-xs);
974+
cursor: pointer;
975+
font-style: normal;
976+
color: var(--hacker-secondary);
977+
}
978+
979+
.tooltip::before {
980+
content: "ⁱ";
981+
font-size: 0.9em;
982+
line-height: 1;
983+
transition: color 0.2s ease;
984+
}
985+
986+
.tooltip:hover::before {
987+
color: var(--hacker-primary);
971988

972989
}
973990

974991
.tooltip::after,
975992
[title]::after {
976993
position: absolute;
977-
bottom: calc(100% + var(--space-xs));
994+
bottom: calc(100% + var(--space-2xl));
978995
left: 50%;
979996
transform: translateX(-50%);
980997
background: var(--hacker-bg-dark-opacity);
981998
color: var(--hacker-secondary);
982999
padding: var(--space-s);
9831000
border-radius: var(--radius-m);
984-
font-size: var(--font-size-xs);
1001+
font-size: var(--font-size-m);
9851002
white-space: normal;
9861003
overflow-wrap: break-word;
9871004
width: max-content;
@@ -993,10 +1010,27 @@ input[type=number]::-webkit-outer-spin-button {
9931010
transition: opacity 0.3s ease;
9941011
border: 1px solid var(--hacker-border);
9951012
z-index: 1000;
1013+
box-shadow: 6px 6px 0px 0px, 0 0 5000px 5000px #00000070;
1014+
}
1015+
1016+
.tooltip:hover::after {
1017+
display: block;
1018+
opacity: 1;
1019+
visibility: visible;
9961020
}
9971021

998-
.tooltip::after {
999-
content: attr(data-tooltip);
1022+
.additional-help {
1023+
font-size: var(--font-size-s);
1024+
color: var(--color-text-secondary);
1025+
margin-top: var(--space-l);
1026+
line-height: 1.5;
1027+
height: 3em;
1028+
user-select: none;
1029+
}
1030+
1031+
.tamper--script {
1032+
font-weight: bold;
1033+
10001034
}
10011035

10021036
[title]::after {

0 commit comments

Comments
 (0)