WebHost: allow newlines in data-tooltip (#921)

* WebHost: allow newlines in data-tooltip

* WebHost: Tooltips: strip surrounding whitespace

* WebHost: unify tooltips behaviour

* WebHost: unify labels around tooltips

* WebHost: changing tooltips width to max-width to allow small tooltips to not have empty space.

* Minor modifications to tooltips

- Reduce tooltip target to (?) spans
- Set fixed width of 260px on tooltips
- Add space between : and (?) on player-settings
- Removed cursor:pointer on tooltips
- Fix labels for checkboxes on generate.html

Co-authored-by: Chris Wilson <chris@legendserver.info>

WebHostLib/static/assets/player-settings.js

@@ -102,9 +102,15 @@ const buildOptionsTable = (settings, romOpts = false) => {
     // td Left
     const tdl = document.createElement('td');
     const label = document.createElement('label');
+    label.textContent = `${settings[setting].displayName}: `;
     label.setAttribute('for', setting);
-    label.setAttribute('data-tooltip', settings[setting].description);
-    label.innerText = `${settings[setting].displayName}:`;
+
+    const questionSpan = document.createElement('span');
+    questionSpan.classList.add('interactive');
+    questionSpan.setAttribute('data-tooltip', settings[setting].description);
+    questionSpan.innerText = '(?)';
+
+    label.appendChild(questionSpan);
     tdl.appendChild(label);
     tr.appendChild(tdl);
 

WebHostLib/static/styles/generate.css

@@ -56,7 +56,3 @@
 #file-input{
     display: none;
 }
-
-.interactive{
-    color: #ffef00;
-}

WebHostLib/static/styles/globalStyles.css

@@ -105,3 +105,7 @@ h5, h6{
     margin-bottom: 20px;
     background-color: #ffff00;
 }
+
+.interactive{
+    color: #ffef00;
+}

WebHostLib/static/styles/tooltip.css

@@ -14,7 +14,6 @@ give it one of the following classes: tooltip-left, tooltip-right, tooltip-top,
 /* Base styles for the element that has a tooltip */
 [data-tooltip], .tooltip {
 	position: relative;
-	cursor: pointer;
 }
 
 /* Base styles for the entire tooltip */
@@ -55,14 +54,15 @@ give it one of the following classes: tooltip-left, tooltip-right, tooltip-top,
 
 /** Content styles */
 .tooltip:after, [data-tooltip]:after {
+	width: 260px;
 	z-index: 10000;
 	padding: 8px;
-	width: 160px;
     border-radius: 4px;
 	background-color: #000;
 	background-color: hsla(0, 0%, 20%, 0.9);
 	color: #fff;
 	content: attr(data-tooltip);
+	white-space: pre-wrap;
 	font-size: 14px;
 	line-height: 1.2;
 }