diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index 0235c85a..f74fac66 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -493,6 +493,7 @@ input[type="checkbox"]:checked+label {
left: -1.7em;
width: calc(100% + 1.3em);
}
+.tglbtn,
#tree>a+a {
padding: .2em .4em;
font-size: 1.2em;
@@ -503,9 +504,11 @@ input[type="checkbox"]:checked+label {
position: relative;
top: -.2em;
}
+.tglbtn:hover,
#tree>a+a:hover {
background: #805;
}
+.tglbtn.on,
#tree>a+a.on {
background: #fc4;
color: #400;
@@ -612,7 +615,7 @@ input[type="checkbox"]:checked+label {
max-width: none;
margin-right: 1.5em;
}
-#key_notation>span {
+#op_cfg>div>span {
display: inline-block;
padding: .2em .4em;
}
@@ -635,6 +638,9 @@ input[type="checkbox"]:checked+label {
top: 6em;
right: 1.5em;
}
+#ops:hover #opdesc.off {
+ display: none;
+}
#opdesc code {
background: #3c3c3c;
padding: .2em .3em;
diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html
index 32025d96..4f5114de 100644
--- a/copyparty/web/browser.html
+++ b/copyparty/web/browser.html
@@ -41,6 +41,10 @@
key notation
+
tooltips
+
@@ -54,7 +58,7 @@
🍞...
+
–
- a
+ a
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index 39ce25ee..3df804d6 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -1469,14 +1469,25 @@ function addcrc() {
(function () {
+ var tt = bcfg_get('tooltips', true);
+
function set_tooltip(e) {
ev(e);
- ebi('opdesc').innerHTML = this.getAttribute('data-desc');
+ var o = ebi('opdesc');
+ o.innerHTML = this.getAttribute('data-desc');
+ o.setAttribute('class', tt ? '' : 'off');
}
+
var btns = document.querySelectorAll('#ops, #ops>a');
for (var a = 0; a < btns.length; a++) {
btns[a].onmouseenter = set_tooltip;
}
+
+ ebi('tooltips').onclick = function (e) {
+ ev(e);
+ tt = !tt;
+ bcfg_set('tooltips', tt);
+ };
})();
diff --git a/copyparty/web/util.js b/copyparty/web/util.js
index afeace9f..50685283 100644
--- a/copyparty/web/util.js
+++ b/copyparty/web/util.js
@@ -403,8 +403,10 @@ function bcfg_upd_ui(name, val) {
if (o.getAttribute('type') == 'checkbox')
o.checked = val;
- else if (o)
- o.setAttribute('class', val ? 'on' : '');
+ else if (o) {
+ var fun = val ? 'add' : 'remove';
+ o.classList[fun]('on');
+ }
}