Tooltips for effect sliders.

wled00/data/index.css

@@ -376,18 +376,76 @@ button {
 #sliders {
 	width: 310px;
 	margin: 0 auto;
+	position: absolute;
+	bottom: 0;
+	left: 50%;
+	transform: translateX(-50%);
 }
 
 #sliders .labels {
 	padding-top: 3px;
+	font-size: small;
 }
 
-#slider0, #slider1, #slider2, #slider3, #slider4 {
+.slider {
 	background: var(--c-2);
 	max-width: 310px;
 	min-width: 280px;
 	margin: 0 auto 5px;
 	border-radius: 15px;
+	position: relative;
+}
+
+/* Tooltip text */
+.slider .tooltiptext {
+	visibility: hidden;
+	background-color: var(--c-5);
+	color: var(--c-f);
+	text-align: center;
+	padding: 5px 10px;
+	border-radius: 6px;
+
+	/* Position the tooltip text */
+	width: 160px;
+	position: absolute;
+	z-index: 1;
+	bottom: 100%;
+	left: 50%;
+	margin-left: -92px;
+
+	/* Fade in tooltip */
+	opacity: 0;
+	transition: opacity 0.3s;
+}
+
+.slider.top .tooltiptext {
+	top: 100%;
+	bottom: unset;
+}
+
+/* Tooltip arrow */
+.slider .tooltiptext::after {
+	content: "";
+	position: absolute;
+	top: 100%;
+	left: 50%;
+	margin-left: -5px;
+	border-width: 5px;
+	border-style: solid;
+	border-color: var(--c-5) transparent transparent transparent;
+}
+
+.slider.top  .tooltiptext::after {
+	bottom: 100%;
+	left: 50%;
+	top: unset;
+	border-color: transparent transparent var(--c-5) transparent;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.slider:hover .tooltiptext {
+	visibility: visible;
+	opacity: 1;
 }
 
 #pql, .edit-icon {

wled00/data/index.htm

@@ -217,50 +217,50 @@
 			</div>
 		</div>
 		<div id="sliders">
-			<p class="labels hd" id="sliderLabel0">Effect speed</p>
-			<div id="slider0">
+			<div id="slider0" class="slider">
 				<i class="icons slider-icon" style="cursor: pointer;" onclick="tglFreeze()">&#xe325;</i>
 				<div 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>
 				<output class="sliderbubble"></output>
+				<span id="sliderLabel0" class="tooltiptext">Effect speed</span>
 			</div>
-			<p class="labels hd" id="sliderLabel1">Effect intensity</p>
-			<div id="slider1">
+			<div id="slider1" class="slider">
 				<i class="icons slider-icon" style="cursor: pointer;" onclick="tglLabels()">&#xe409;</i>
 				<div 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>
 				<output class="sliderbubble"></output>
+				<span class="tooltiptext" id="sliderLabel1">Effect intensity</span>
 			</div>
-			<p class="labels hd" id="sliderLabel2">Custom 1</p>
-			<div id="slider2" class="hide">
+			<div id="slider2" class="slider hide">
 				<i class="icons slider-icon">&#xe410;</i>
 				<div class="sliderwrap il">
 					<input id="sliderC1" class="noslide" onchange="setCustom(1)" oninput="updateTrail(this)" max="255" min="0" type="range" value="6" />
 					<div class="sliderdisplay"></div>
 				</div>
 				<output class="sliderbubble"></output>
+				<span class="tooltiptext" id="sliderLabel2">Custom 1</span>
 			</div>
-			<p class="labels hd" id="sliderLabel3">Custom 2</p>
-			<div id="slider3" class="hide">
+			<div id="slider3" class="slider hide">
 				<i class="icons slider-icon">&#xe0a2;</i>
 				<div class="sliderwrap il">
 					<input id="sliderC2" class="noslide" onchange="setCustom(2)" oninput="updateTrail(this)" max="255" min="0" type="range" value="6" />
 					<div class="sliderdisplay"></div>
 				</div>
 				<output class="sliderbubble"></output>
+				<span class="tooltiptext" id="sliderLabel3">Custom 2</span>
 			</div>
-			<p class="labels hd" id="sliderLabel4">Custom 3</p>
-			<div id="slider4" class="hide">
+			<div id="slider4" class="slider hide">
 				<i class="icons slider-icon">&#xe0e8;</i>
 				<div class="sliderwrap il">
 					<input id="sliderC3" class="noslide" onchange="setCustom(3)" oninput="updateTrail(this)" max="255" min="0" type="range" value="6" />
 					<div class="sliderdisplay"></div>
 				</div>
 				<output class="sliderbubble"></output>
+				<span class="tooltiptext" id="sliderLabel4">Custom 3</span>
 			</div>
 		</div>
 	</div>

wled00/data/index.js

@@ -1279,7 +1279,6 @@ function readState(s,command=false)
 function setSliderAndColorControl(idx, applyDef=false)
 {
 	if (!(Array.isArray(fxdata) && fxdata.length>idx)) return;
-	var topPosition = 0;
   	var controlDefined = (fxdata[idx].substr(0,1) == "@");
 	var extra = fxdata[idx].substr(1);
 	var extras = (extra == '')?[]:extra.split(";");
@@ -1289,7 +1288,8 @@ function setSliderAndColorControl(idx, applyDef=false)
 	var obj = {"seg":{}};
   
 	// set html slider items on/off
-	var nSliders = Math.min(5,Math.floor(gId("sliders").children.length / 2)); // p (label) & div for each slider
+	var nSliders = Math.min(5,Math.floor(gId("sliders").children.length)); // div for each slider
+	var sldCnt = 0;
 	for (let i=0; i<nSliders; i++) {
 		var slider = gId("slider" + i);
 		var label = gId("sliderLabel" + i);
@@ -1308,21 +1308,17 @@ function setSliderAndColorControl(idx, applyDef=false)
 			else if (i==0)                           label.innerHTML = "Effect speed";
 			else if (i==1)                           label.innerHTML = "Effect intensity";
 			else                                     label.innerHTML = "Custom" + (i-1);
-			label.classList.remove("hide");
+			if (sldCnt++===0) slider.classList.add("top");
 			slider.classList.remove("hide");
-			if (getComputedStyle(label).display === "block") topPosition += 58; // increase top position for the next control
-			else topPosition += 35;
-			slider.setAttribute('title',label.innerHTML);
+			//slider.setAttribute('title',label.innerHTML);
 		} else {
-			// disable label and slider
 			slider.classList.add("hide");
-			label.classList.add("hide");
+			slider.classList.remove("top");
 		}
 	}
-	if (topPosition>0) { topPosition += 5; gId("sliders").style.paddingTop = "5px"; }
-	else gId("sliders").style.padding = 0;
 
 	// set size of fx list
+	let topPosition = 5 + parseInt(getComputedStyle(gId("sliders")).height);
 	gId("fx").style.height = `calc(100% - ${topPosition}px)`;
 
 	// set html color items on/off