From f3518b3d0f8dfd2e6bd305a886d8551061f3d366 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Fri, 29 Dec 2023 18:12:14 +0000
Subject: [PATCH] Fix some broken tooltips.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4700 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 core/client.js | 51 +++++++++++++++++++++++---------------------------
 core/style.css | 28 ---------------------------
 2 files changed, 23 insertions(+), 56 deletions(-)

diff --git a/core/client.js b/core/client.js
index 1e7c509b..deedf6e2 100644
--- a/core/client.js
+++ b/core/client.js
@@ -120,19 +120,38 @@ class TfNavigationElement extends LitElement {
 		}
 	}
 
+	set_access_key_title(event) {
+		if (!event.srcElement.title) {
+			event.srcElement.title = `${event.srcElement.dataset.tip} [${(event.srcElement.accessKeyLabel || event.srcElement.accessKey).toUpperCase()}]`;
+		}
+	}
+
 	render() {
 		let self = this;
 		return html`
 			<style>
 				${k_global_style}
+				.tooltip {
+					position: absolute;
+					z-index: 1;
+					display: none;
+					border: 1px solid black;
+					padding: 4px;
+					color: black;
+					background: white;
+				}
+
+				.tooltip_parent:hover .tooltip {
+					display: inline-block;
+				}
 			</style>
 			<div style="margin: 4px; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 3px; align-items: center">
 				<span style="cursor: pointer" @click=${() => this.show_version = !this.show_version}>😎</span>
 				<span ?hidden=${!this.show_version} style="flex: 0 0; white-space: nowrap" title=${this.version?.name + ' ' + Object.entries(this.version || {}).filter(x => ['name', 'number'].indexOf(x[0]) == -1).map(x => `\n* ${x[0]}: ${x[1]}`)}>${this.version?.number}</span>
-				<a accesskey="h" data-tip="Open home app." href="/" style="color: #fff; white-space: nowrap">TF</a>
-				<a accesskey="a" data-tip="Open apps list." href="/~core/apps/">apps</a>
-				<a accesskey="e" data-tip="Toggle the app editor." href="#" @click=${this.toggle_edit}>edit</a>
-				<a accesskey="p" data-tip="View and change permissions." href="#" @click=${() => self.show_permissions = !self.show_permissions}>🎛️</a>
+				<a accesskey="h" @mouseover=${this.set_access_key_title} data-tip="Open home app." href="/" style="color: #fff; white-space: nowrap">TF</a>
+				<a accesskey="a" @mouseover=${this.set_access_key_title} data-tip="Open apps list." href="/~core/apps/">apps</a>
+				<a accesskey="e" @mouseover=${this.set_access_key_title} data-tip="Toggle the app editor." href="#" @click=${this.toggle_edit}>edit</a>
+				<a accesskey="p" @mouseover=${this.set_access_key_title} data-tip="View and change permissions." href="#" @click=${() => self.show_permissions = !self.show_permissions}>🎛️</a>
 				<span style="display: inline-block; vertical-align: top; white-space: pre; color: ${this.status.color ?? kErrorColor}">${this.status.message}</span>
 				<span id="requests"></span>
 				${this.render_permissions()}
@@ -1077,30 +1096,6 @@ window.addEventListener("load", function() {
 		event.preventDefault();
 		trace();
 	});
-	for (let tag of document.getElementsByTagName('a')) {
-		if (tag.accessKey) {
-			tag.classList.add('tooltip_parent');
-			let tooltip = document.createElement('div');
-			tooltip.classList.add('tooltip');
-			if (tag.dataset.tip) {
-				let description = document.createElement('div');
-				description.innerText = tag.dataset.tip;
-				tooltip.appendChild(description);
-			}
-			let parts = tag.accessKeyLabel ? tag.accessKeyLabel.split('+') : [];
-			for (let i = 0; i < parts.length; i++)
-			{
-				let key = parts[i];
-				let kbd = document.createElement('kbd');
-				kbd.innerText = key;
-				tooltip.appendChild(kbd);
-				if (i < parts.length - 1) {
-					tooltip.appendChild(document.createTextNode('+'));
-				}
-			}
-			tag.appendChild(tooltip);
-		}
-	}
 	connectSocket(window.location.pathname);
 
 	if (window.localStorage.getItem('editing') == '1') {
diff --git a/core/style.css b/core/style.css
index 42e7393d..7e157281 100644
--- a/core/style.css
+++ b/core/style.css
@@ -125,34 +125,6 @@ a:active {
 .cyan { color: #2aa198; }
 .green { color: #859900; }
 
-.tooltip {
-	position: absolute;
-	z-index: 1;
-	display: none;
-	border: 1px solid black;
-	padding: 4px;
-	color: black;
-	background: white;
-}
-
-.tooltip_parent:hover .tooltip {
-	display: inline-block;
-}
-
-kbd {
-	background-color: #eee;
-	border-radius: 3px;
-	border: 1px solid #b4b4b4;
-	box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
-	color: #333;
-	display: inline-block;
-	font-size: .85em;
-	font-weight: 700;
-	line-height: 1;
-	padding: 2px 4px;
-	white-space: nowrap;
-}
-
 .permissions {
 	position: absolute;
 	display: block;