From fcafd8b05ea667bf8eb43e55e89f710270ee6d0e Mon Sep 17 00:00:00 2001
From: Woody <xaver@holzapfel.net>
Date: Wed, 31 Jan 2024 22:35:10 +0100
Subject: [PATCH 1/2] Improved tooltips

---
 wled00/data/index.htm | 82 +++++++++++++++++++++----------------------
 wled00/data/index.js  | 11 ++++--
 2 files changed, 50 insertions(+), 43 deletions(-)

diff --git a/wled00/data/index.htm b/wled00/data/index.htm
index ae685bdb9..afae602e5 100644
--- a/wled00/data/index.htm
+++ b/wled00/data/index.htm
@@ -46,89 +46,89 @@
 	<div id="Colors" class="tabcontent">
 		<div id="picker" class="noslide"></div>
 		<div id="hwrap" class="slider">
-			<div tooltip="Hue" class="sliderwrap il">
+			<div title="Hue" class="sliderwrap il">
 				<input id="sliderH" class="noslide" oninput="fromH()" onchange="setColor(0)" max="359" min="0" type="range" value="0" step="any">
 				<div class="sliderdisplay" style="background: linear-gradient(90deg, #f00 2%, #ff0 19%, #0f0 35%, #0ff 52%, #00f 68%, #f0f 85%, #f00)"></div>
 			</div>
 		</div>
 		<div id="swrap" class="slider">
-			<div tooltip="Saturation" class="sliderwrap il">
+			<div title="Saturation" class="sliderwrap il">
 				<input id="sliderS" class="noslide" oninput="fromS()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any">
 				<div class="sliderdisplay" style="background: linear-gradient(90deg, #aaa 0%, #f00)"></div>
 			</div>
 		</div>
 		<div id="vwrap" class="slider">
-			<div tooltip="Value/Brightness" class="sliderwrap il">
+			<div title="Value/Brightness" class="sliderwrap il">
 				<input id="sliderV" class="noslide" oninput="fromV()" onchange="setColor(0)" max="100" min="0" type="range" value="100" step="any" />
 				<div class="sliderdisplay"></div>
 			</div>
 		</div>
 		<div id="kwrap" class="slider">
-			<div tooltip="Kelvin/Temperature" class="sliderwrap il">
+			<div title="Kelvin/Temperature" class="sliderwrap il">
 				<input id="sliderK" class="noslide" oninput="fromK()" onchange="setColor(0)" max="10091" min="1900" type="range" value="6550" />
 				<div class="sliderdisplay"></div>
 			</div>
 		</div>
 		<div id="rgbwrap">
 			<div id="rwrap" class="slider">
-				<div tooltip="Red channel" class="sliderwrap il">
+				<div title="Red channel" class="sliderwrap il">
 					<input id="sliderR" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
 					<div class="sliderdisplay"></div>
 				</div>
 			</div>
 			<div id="gwrap" class="slider">
-				<div tooltip="Green channel" class="sliderwrap il">
+				<div title="Green channel" class="sliderwrap il">
 					<input id="sliderG" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
 					<div class="sliderdisplay"></div>
 				</div>
 			</div>
 			<div id="bwrap" class="slider">
-				<div tooltip="Blue channel" class="sliderwrap il">
+				<div title="Blue channel" class="sliderwrap il">
 					<input id="sliderB" class="noslide" oninput="fromRgb()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
 					<div class="sliderdisplay"></div>
 				</div>
 			</div>
 		</div>
 		<div id="wwrap" class="slider">
-			<div id="whibri" tooltip="White channel" class="sliderwrap il">
+			<div id="whibri" title="White channel" class="sliderwrap il">
 				<input id="sliderW" class="noslide" oninput="fromW()" onchange="setColor(0)" max="255" min="0" type="range" value="128" />
 				<div class="sliderdisplay"></div>
 			</div>
 		</div>
 		<div id="wbal" class="slider">
-			<div tooltip="White balance" class="sliderwrap il">
+			<div title="White balance" class="sliderwrap il">
 				<input id="sliderA" class="noslide" onchange="setBalance(this.value)" max="255" min="0" type="range" value="128" />
 				<div class="sliderdisplay"></div>
 			</div>
 		</div>
 		<div id="qcs-w">
-			<div class="qcs" onclick="pC('#ff0000');" tooltip="Red" style="background-color:#ff0000;"></div>
-			<div class="qcs" onclick="pC('#ffa000');" tooltip="Orange" style="background-color:#ffa000;"></div>
-			<div class="qcs" onclick="pC('#ffc800');" tooltip="Yellow" style="background-color:#ffc800;"></div>
-			<div class="qcs" onclick="pC('#ffe0a0');" tooltip="Warm White" style="background-color:#ffe0a0;"></div>
-			<div class="qcs" onclick="pC('#ffffff');" tooltip="White" style="background-color:#ffffff;"></div>
-			<div class="qcs qcsb" onclick="pC('#000000');" tooltip="Black" style="background-color:#000000;"></div><br>
-			<div class="qcs" onclick="pC('#ff00ff');" tooltip="Pink" style="background-color:#ff00ff;"></div>
-			<div class="qcs" onclick="pC('#0000ff');" tooltip="Blue" style="background-color:#0000ff;"></div>
-			<div class="qcs" onclick="pC('#00ffc8');" tooltip="Cyan" style="background-color:#00ffc8;"></div>
-			<div class="qcs" onclick="pC('#08ff00');" tooltip="Green" style="background-color:#08ff00;"></div>
-			<div class="qcs" onclick="pC('rnd');" tooltip="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
+			<div class="qcs" onclick="pC('#ff0000');" style="background-color:#ff0000;"></div>
+			<div class="qcs" onclick="pC('#ffa000');" style="background-color:#ffa000;"></div>
+			<div class="qcs" onclick="pC('#ffc800');" style="background-color:#ffc800;"></div>
+			<div class="qcs" onclick="pC('#ffe0a0');" style="background-color:#ffe0a0;"></div>
+			<div class="qcs" onclick="pC('#ffffff');" style="background-color:#ffffff;"></div>
+			<div class="qcs qcsb" onclick="pC('#000000');" style="background-color:#000000;"></div><br>
+			<div class="qcs" onclick="pC('#ff00ff');" style="background-color:#ff00ff;"></div>
+			<div class="qcs" onclick="pC('#0000ff');" style="background-color:#0000ff;"></div>
+			<div class="qcs" onclick="pC('#00ffc8');" style="background-color:#00ffc8;"></div>
+			<div class="qcs" onclick="pC('#08ff00');" style="background-color:#08ff00;"></div>
+			<div class="qcs" onclick="pC('rnd');" title="Random" style="background:linear-gradient(to right, red, orange, yellow, green, blue, purple);transform: translateY(-11px);">R</div>
 		</div>
 		<div id="csl">
-			<button id="csl0" tooltip="Select slot" class="btn xxs cl" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button>
-			<button id="csl1" tooltip="Select slot" class="btn xxs cl" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button>
-			<button id="csl2" tooltip="Select slot" class="btn xxs cl" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button>
+			<button id="csl0" title="Select slot" class="btn xxs cl" onclick="selectSlot(0);" data-r="0" data-g="0" data-b="0" data-w="0">1</button>
+			<button id="csl1" title="Select slot" class="btn xxs cl" onclick="selectSlot(1);" data-r="0" data-g="0" data-b="0" data-w="0">2</button>
+			<button id="csl2" title="Select slot" class="btn xxs cl" onclick="selectSlot(2);" data-r="0" data-g="0" data-b="0" data-w="0">3</button>
 		</div>
 		<p class="labels h" id="cslLabel"></p>
 		<div id="hexw">
 			<i class="icons sel-icon" onclick="tglRgb()">&#xe22d;</i>
-			<input id="hexc" tooltip="Hex RGB" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" />
+			<input id="hexc" title="Hex RGB" type="text" class="noslide" onkeydown="hexEnter()" autocomplete="off" maxlength="8" />
 			<button id="hexcnf" class="btn btn-xs" onclick="fromHex();"><i class="icons btn-icon">&#xe390;</i></button>
 		</div>
 		<div style="padding: 8px 0;" id="btns">
-			<button class="btn btn-xs" tooltip="Pixel Magic Tool" type="button" id="pxmb" onclick="window.location.href=getURL('/pxmagic.htm')"><i class="icons btn-icon">&#xe410;</i></button>
-			<button class="btn btn-xs" tooltip="Add custom palette" type="button" onclick="window.location.href=getURL('/cpal.htm')"><i class="icons btn-icon">&#xe18a;</i></button>
-			<button class="btn btn-xs" tooltip="Remove custom palette" type="button" id="rmPal" onclick="palettesData=null;localStorage.removeItem('wledPalx');requestJson({rmcpal:true});setTimeout(loadPalettes,250,loadPalettesData);"><i class="icons btn-icon">&#xe037;</i></button>
+			<button class="btn btn-xs" title="Pixel Magic Tool" type="button" id="pxmb" onclick="window.location.href=getURL('/pxmagic.htm')"><i class="icons btn-icon">&#xe410;</i></button>
+			<button class="btn btn-xs" title="Add custom palette" type="button" onclick="window.location.href=getURL('/cpal.htm')"><i class="icons btn-icon">&#xe18a;</i></button>
+			<button class="btn btn-xs" title="Remove custom palette" type="button" id="rmPal" onclick="palettesData=null;localStorage.removeItem('wledPalx');requestJson({rmcpal:true});setTimeout(loadPalettes,250,loadPalettesData);"><i class="icons btn-icon">&#xe037;</i></button>
 		</div>
 		<p class="labels" id="pall"><i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i> Color palette</p>
 		<div id="palw" class="il">
@@ -159,27 +159,27 @@
 				<i class="icons clear-icon" onclick="clean(this);">&#xe38f;</i>
 				<i class="icons search-icon" style="cursor:pointer;">&#xe0a1;</i>
 				<div id="filters" class="filter fade">
-					<label id="filterPal" tooltip="Uses palette" class="check fchkl">&#x1F3A8;
+					<label id="filterPal" title="Uses palette" class="check fchkl">&#x1F3A8;
 						<input type="checkbox" data-flt="&#x1F3A8;" onchange="filterFx();">
 						<span class="checkmark"></span>
 					</label>
-					<label id="filter0D" tooltip="Single pixel" class="check fchkl">&#8226;
+					<label id="filter0D" title="Single pixel" class="check fchkl">&#8226;
 						<input type="checkbox" data-flt="&#8226;" onchange="filterFx();">
 						<span class="checkmark"></span>
 					</label>
-					<label id="filter1D" tooltip="1D" class="check fchkl">&#8942;
+					<label id="filter1D" title="1D" class="check fchkl">&#8942;
 						<input type="checkbox" data-flt="&#8942;" onchange="filterFx();">
 						<span class="checkmark"></span>
 					</label>
-					<label id="filter2D" tooltip="2D" class="check fchkl">&#9638;
+					<label id="filter2D" title="2D" class="check fchkl">&#9638;
 						<input type="checkbox" data-flt="&#9638;" onchange="filterFx();">
 						<span class="checkmark"></span>
 					</label>
-					<label id="filterVol" tooltip="Volume" class="check fchkl">&#9834;
+					<label id="filterVol" title="Volume" class="check fchkl">&#9834;
 						<input type="checkbox" data-flt="&#9834;" onchange="filterFx();">
 						<span class="checkmark"></span>
 					</label>
-					<label id="filterFreq" tooltip="Frequency" class="check fchkl">&#9835;
+					<label id="filterFreq" title="Frequency" class="check fchkl">&#9835;
 						<input type="checkbox" data-flt="&#9835;" onchange="filterFx();">
 						<span class="checkmark"></span>
 					</label>
@@ -200,7 +200,7 @@
 		<div id="sliders">
 			<div id="slider0" class="slider">
 				<i class="icons slider-icon" onclick="tglFreeze()">&#xe325;</i>
-				<div tooltip="Effect speed" class="sliderwrap il">
+				<div title="Effect speed" class="sliderwrap il">
 					<input id="sliderSpeed" class="noslide" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
 					<div class="sliderdisplay"></div>
 				</div>
@@ -208,7 +208,7 @@
 			</div>
 			<div id="slider1" class="slider">
 				<i class="icons slider-icon" onclick="tglLabels()">&#xe409;</i>
-				<div tooltip="Effect intensity" class="sliderwrap il">
+				<div title="Effect intensity" class="sliderwrap il">
 					<input id="sliderIntensity" class="noslide" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
 					<div class="sliderdisplay"></div>
 				</div>
@@ -216,7 +216,7 @@
 			</div>
 			<div id="slider2" class="slider hide">
 				<i class="icons slider-icon">&#xe410;</i>
-				<div tooltip="Custom 1" class="sliderwrap il">
+				<div title="Custom 1" class="sliderwrap il">
 					<input id="sliderC1" class="noslide" onchange="setCustom(1)" oninput="updateTrail(this)" max="255" min="0" type="range" value="0" />
 					<div class="sliderdisplay"></div>
 				</div>
@@ -224,7 +224,7 @@
 			</div>
 			<div id="slider3" class="slider hide">
 				<i class="icons slider-icon">&#xe0a2;</i>
-				<div tooltip="Custom 2" class="sliderwrap il">
+				<div title="Custom 2" class="sliderwrap il">
 					<input id="sliderC2" class="noslide" onchange="setCustom(2)" oninput="updateTrail(this)" max="255" min="0" type="range" value="0" />
 					<div class="sliderdisplay"></div>
 				</div>
@@ -232,22 +232,22 @@
 			</div>
 			<div id="slider4" class="slider hide">
 				<i class="icons slider-icon">&#xe0e8;</i>
-				<div tooltip="Custom 3" class="sliderwrap il">
+				<div title="Custom 3" class="sliderwrap il">
 					<input id="sliderC3" class="noslide" onchange="setCustom(3)" oninput="updateTrail(this)" max="31" min="0" type="range" value="0" />
 					<div class="sliderdisplay"></div>
 				</div>
 				<output class="sliderbubble"></output>
 			</div>
 			<div id="fxopt" class="option fade">
-				<label id="opt0" tooltip="Check 1" class="check ochkl hide"><i class="icons">&#xe2b3;</i>
+				<label id="opt0" title="Check 1" class="check ochkl hide"><i class="icons">&#xe2b3;</i>
 					<input id="checkO1" type="checkbox" onchange="setOption(1, this.checked)">
 					<span class="checkmark"></span>
 				</label>
-				<label id="opt1" tooltip="Check 2" class="check ochkl hide"><i class="icons">&#xe34b;</i>
+				<label id="opt1" title="Check 2" class="check ochkl hide"><i class="icons">&#xe34b;</i>
 					<input id="checkO2" type="checkbox" onchange="setOption(2, this.checked)">
 					<span class="checkmark"></span>
 				</label>
-				<label id="opt2" tooltip="Check 3" class="check ochkl hide"><i class="icons">&#xe04c;</i>
+				<label id="opt2" title="Check 3" class="check ochkl hide"><i class="icons">&#xe04c;</i>
 					<input id="checkO3" type="checkbox" onchange="setOption(3, this.checked)">
 					<span class="checkmark"></span>
 				</label>
diff --git a/wled00/data/index.js b/wled00/data/index.js
index bdaa3ed60..06d0430c1 100644
--- a/wled00/data/index.js
+++ b/wled00/data/index.js
@@ -3073,12 +3073,17 @@ function mergeDeep(target, ...sources)
 
 function tooltip()
 {
-	const elements = d.querySelectorAll("[tooltip]");
+	const elements = d.querySelectorAll("[title]");
 	elements.forEach((element)=>{
 		element.addEventListener("mouseover", ()=>{
+			// save title
+			element.setAttribute("data-title", element.getAttribute("title"));
 			const tooltip = d.createElement("span");
 			tooltip.className = "tooltip";
-			tooltip.textContent = element.getAttribute("tooltip");
+			tooltip.textContent = element.getAttribute("title");
+
+			// prevent default title popup
+			element.removeAttribute("title");
 
 			let { top, left, width } = element.getBoundingClientRect();
 
@@ -3101,6 +3106,8 @@ function tooltip()
 				tooltip.classList.remove("visible");
 				d.body.removeChild(tooltip);
 			});
+			// restore title
+			element.setAttribute("title", element.getAttribute("data-title"));
 		});
 	});
 };

From 777ed55c21bf8267484bf73ffb0aab5925331e3b Mon Sep 17 00:00:00 2001
From: Woody <xaver@holzapfel.net>
Date: Wed, 31 Jan 2024 22:36:09 +0100
Subject: [PATCH 2/2] Add tooltip for toggle freeze & label

---
 wled00/data/index.htm | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/wled00/data/index.htm b/wled00/data/index.htm
index afae602e5..c735f00d0 100644
--- a/wled00/data/index.htm
+++ b/wled00/data/index.htm
@@ -199,7 +199,7 @@
 		</div>
 		<div id="sliders">
 			<div id="slider0" class="slider">
-				<i class="icons slider-icon" onclick="tglFreeze()">&#xe325;</i>
+				<i class="icons slider-icon" title="Freeze" onclick="tglFreeze()">&#xe325;</i>
 				<div title="Effect speed" class="sliderwrap il">
 					<input id="sliderSpeed" class="noslide" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
 					<div class="sliderdisplay"></div>
@@ -207,7 +207,7 @@
 				<output class="sliderbubble"></output>
 			</div>
 			<div id="slider1" class="slider">
-				<i class="icons slider-icon" onclick="tglLabels()">&#xe409;</i>
+				<i class="icons slider-icon" title="Toggle labels" onclick="tglLabels()">&#xe409;</i>
 				<div title="Effect intensity" class="sliderwrap il">
 					<input id="sliderIntensity" class="noslide" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
 					<div class="sliderdisplay"></div>