roi: use popover for tooltips

ts/roi.ts

@@ -33,7 +33,7 @@ async function render() {
 			</td>
 		`;
 		const output = tr.querySelector('td')!;
-		output.title = p.recipe;
+		output.dataset.tooltip = p.recipe;
 		tbody.appendChild(tr);
 	}
 }
@@ -44,6 +44,24 @@ function color(n: number, low: number, high: number): string {
 	return `color-mix(in oklch, #0c8 ${scale * 100}%, #f70)`;
 }
 
+const main = document.querySelector('main')!;
+const popover = document.querySelector('#popover') as HTMLElement;
+main.addEventListener('mouseover', (event) => {
+	const target = event.target as HTMLElement;
+	if (target.dataset.tooltip) {
+		popover.textContent = target.dataset.tooltip;
+		const rect = target.getBoundingClientRect();
+		popover.style.left = `${rect.left}px`;
+		popover.style.top = `${rect.bottom}px`;
+		popover.showPopover();
+	}
+});
+main.addEventListener('mouseout', (event) => {
+	const target = event.target as HTMLElement;
+	if (target.dataset.tooltip)
+		popover.hidePopover();
+});
+
 lowVolume.addEventListener('change', render);
 render();
 

www/index.html

@@ -18,15 +18,16 @@
 					<th>expertise</th>
 					<th>daily<br>profit/area</th>
 					<th>break<br>even</th>
-					<th title="construction cost of 1 building">capex</th>
-					<th title="input and worker costs of 1 building (deterioration/repair not included)">daily<br>opex</th>
-					<th title="max of input and output t and m³ per area">logistics</th>
-					<th title="units output by 1 building over average daily traded">daily output<br>traded</th>
+					<th data-tooltip="construction cost of 1 building">capex</th>
+					<th data-tooltip="input and worker costs of 1 building (deterioration/repair not included)">daily<br>opex</th>
+					<th data-tooltip="max of input and output t and m³ per area. 2 ≅ 2 SCB visits/day. 0.25 ≅ SCB visit every 4 days">logistics</th>
+					<th data-tooltip="units output by 1 building over average daily traded">daily output<br>traded</th>
 				</tr>
 			</thead>
 			<tbody></tbody>
 		</table>
 	</main>
+	<div id="popover" popover="hint"></div>
 	<script src="roi.js"></script>
 </body>
 </html>

www/style.css

@@ -56,3 +56,18 @@ main {
 		}
 	}
 }
+
+*[data-tooltip] {
+	text-decoration: underline dashed;
+	cursor: help;
+}
+
+[popover="hint"] {
+	inset: unset;
+	max-width: 320px;
+	padding: 0.5em 0.7em;
+	color: inherit;
+	background-color: #222;
+	border: none;
+	opacity: 0.9;
+}