Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit4bf50e2

Browse files
committed
Better tooltips
1 parent8cf84a4 commit4bf50e2

File tree

3 files changed

+78
-79
lines changed

3 files changed

+78
-79
lines changed

‎app.js‎

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

852852
// Initialize the application when DOM is loaded
853853
letsqlgen=null;
854-
document.addEventListener('DOMContentLoaded',()=>{
855-
sqlgen=newSQLMapGenerator();
856-
document.querySelectorAll('input[type=text], textarea').forEach(field=>field.spellcheck=false);
857-
858-
document.querySelectorAll('em.tooltip').forEach(el=>{
859-
consttext=el.textContent;
860-
el.textContent='';
861-
el.dataset.tooltip=text;
862-
});
863-
});
854+
document.addEventListener('DOMContentLoaded',()=>{
855+
sqlgen=newSQLMapGenerator();
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: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,8 @@ <h1><a href="?">SQLMap Command Builder</a></h1>
5757
<divclass="form-grid">
5858
<!-- -u -->
5959
<divclass="form-group">
60-
<labelclass="form-label"for="url">TARGET URL<emclass="tooltip">Target URL (e.g. http://127.0.0.1/vuln.php?id=1)</em><br/><span>-u</span></label>
60+
<labelclass="form-label"for="url">TARGET URL<itooltip="Target URL (e.g. http://127.0.0.1/vuln.php?id=1)">ⁱ</i></label>
61+
<labelclass="form-label"for="url"><u>-u</u></label>
6162
<inputtype="url"id="url"class="form-control"placeholder="https://127.0.0.1/page?id=1">
6263
</div>
6364
<!-- -d -->

‎style.css‎

Lines changed: 66 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
/* Typography */
4848
--font-family-base:"Geist","Inter", -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, sans-serif;
4949
--font-family-mono:'Courier New', monospace;
50+
--font-size-xxs:10px;
5051
--font-size-xs:11px;
5152
--font-size-s:12px;
5253
--font-size-m:14px;
@@ -65,6 +66,7 @@
6566

6667
/* Spacing */
6768
--space-0:0;
69+
--space-xxs:3px;
6870
--space-xs:6px;
6971
--space-s:12px;
7072
--space-m:14px;
@@ -456,18 +458,76 @@ pre code {
456458
}
457459

458460
.form-label {
461+
user-select: none;
459462
color:var(--hacker-primary);
460463
font-weight: bold;
461-
margin-bottom:var(--space-s);
464+
margin-bottom:var(--space-xxs);
462465
font-size:var(--font-size-s);
463466
letter-spacing:0.7px;
464467
}
465468

466-
.form-labelspan, .checkbox-labelspan {
469+
.form-labelu, .checkbox-labelu {
467470
font-weight: normal;;
468471
color: var(--hacker-secondary);
472+
text-decoration: none;
473+
}
474+
475+
.form-labeli {
476+
position: relative;
477+
display: inline-block;
478+
margin-left:var(--space-xs);
479+
cursor: pointer;
480+
font-style: normal;
481+
color:var(--hacker-secondary);
482+
}
483+
484+
.form-labeli:hover::after {
485+
color:var(--hacker-primary);
486+
487+
}
488+
489+
.form-labeli::before {
490+
font-size:var(--font-size-s);
491+
font-weight:var(--font-weight-normal);
492+
color:var(--hacker-secondary);
493+
padding:var(--space-s);
494+
border:1px solidvar(--hacker-secondary);
495+
box-shadow:8px8px0px0pxvar(--hacker-primary);
496+
background:var(--hacker-bg-dark);
497+
498+
position: absolute;
499+
bottom:calc(100%+var(--space-2xl));
500+
left:50%;
501+
transform:translateX(-50%);
502+
border-radius:var(--radius-m);
503+
white-space: normal;
504+
overflow-wrap: break-word;
505+
width: max-content;
506+
max-width:min(30rem,calc(100vw-2rem));
507+
box-sizing: border-box;
508+
visibility: hidden;
509+
display: none;
510+
opacity:0;
511+
transition: opacity0.3s ease;
512+
z-index:1000;
469513
}
470514

515+
.form-labeli:hover::before {
516+
display: block;
517+
opacity:1;
518+
visibility: visible;
519+
}
520+
521+
.form-label [tooltip]::before {
522+
content:attr(tooltip);
523+
white-space: pre-line;
524+
}
525+
526+
.form-labeli:hover::before {
527+
display: block;
528+
opacity:1;
529+
visibility: visible;
530+
}
471531

472532
.form-control:focus {
473533
border-color:var(--hacker-primary);
@@ -787,6 +847,10 @@ select.form-control {
787847
padding-left: var(--space-3xl);
788848
}*/
789849

850+
input,select,textarea {
851+
margin-top:var(--space-xs);
852+
}
853+
790854
.checkbox-labelinput[type="checkbox"], .checkbox-label-tamperinput[type="checkbox"] {
791855
position: absolute;
792856
opacity:0;
@@ -957,66 +1021,10 @@ select.form-control {
9571021
input[type=number] {
9581022
-moz-appearance: textfield;
9591023
appearance: textfield;
960-
margin:0;
9611024
}
9621025
input[type=number]::-webkit-inner-spin-button,
9631026
input[type=number]::-webkit-outer-spin-button {
9641027
-webkit-appearance: none;
965-
margin:0;
966-
}
967-
968-
/* Tooltip styles */
969-
.tooltip,
970-
[title] {
971-
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: color0.2s ease;
984-
}
985-
986-
.tooltip:hover::before {
987-
color:var(--hacker-primary);
988-
989-
}
990-
991-
.tooltip::after,
992-
[title]::after {
993-
position: absolute;
994-
bottom:calc(100%+var(--space-2xl));
995-
left:50%;
996-
transform:translateX(-50%);
997-
background:var(--hacker-bg-dark-opacity);
998-
color:var(--hacker-secondary);
999-
padding:var(--space-s);
1000-
border-radius:var(--radius-m);
1001-
font-size:var(--font-size-m);
1002-
white-space: normal;
1003-
overflow-wrap: break-word;
1004-
width: max-content;
1005-
max-width:min(30rem,calc(100vw-2rem));
1006-
box-sizing: border-box;
1007-
opacity:0;
1008-
visibility: hidden;
1009-
display: none;
1010-
transition: opacity0.3s ease;
1011-
border:1px solidvar(--hacker-border);
1012-
z-index:1000;
1013-
box-shadow:6px6px0px0px,005000px5000px#00000070;
1014-
}
1015-
1016-
.tooltip:hover::after {
1017-
display: block;
1018-
opacity:1;
1019-
visibility: visible;
10201028
}
10211029

10221030
.additional-help {
@@ -1033,13 +1041,3 @@ input[type=number]::-webkit-outer-spin-button {
10331041

10341042
}
10351043

1036-
[title]::after {
1037-
content:attr(title);
1038-
}
1039-
1040-
.tooltip:hover::after,
1041-
[title]:hover::after {
1042-
display: block;
1043-
opacity:1;
1044-
visibility: visible;
1045-
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp