better tooltips (#721)

Author: Rich-Harris

apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte

@@ -206,7 +206,7 @@
 
 	<div class="buttons">
 		<button
-			class="raised icon"
+			class="raised icon tooltip"
 			disabled={saving || !user}
 			onclick={() => fork(false)}
 			aria-label={user ? 'fork' : 'log in to fork'}
@@ -219,7 +219,7 @@
 		</button>
 
 		<button
-			class="raised icon"
+			class="raised icon tooltip"
 			disabled={saving || !user}
 			onclick={save}
 			aria-label={user
@@ -267,26 +267,6 @@
 		background-size: 1.8rem;
 		z-index: 999;
 
-		&[aria-label]:hover::before {
-			content: '';
-			width: 1rem;
-			height: 1rem;
-			position: absolute;
-			background: var(--sk-text-3);
-			top: calc(100% + 0.5rem);
-			rotate: 45deg;
-		}
-
-		&[aria-label]:hover::after {
-			content: attr(aria-label);
-			position: absolute;
-			top: calc(100% + 1rem);
-			background: var(--sk-text-3);
-			color: var(--sk-back-4);
-			padding: 0.5em 0.5em;
-			border-radius: var(--sk-border-radius);
-		}
-
 		&.login {
 			width: auto;
 			background-image: url($lib/icons/user-light.svg);

packages/repl/src/lib/Input/Migrate.svelte

@@ -7,10 +7,10 @@
 </script>
 
 <button
-	class="raised"
+	class="raised tooltip-left"
 	disabled={!can_migrate}
 	onclick={migrate}
-	title="Migrate this component towards the new syntax"
+	aria-label="Convert syntax from Svelte 4 to 5 if possible"
 >
 	migrate
 </button>

packages/site-kit/src/lib/styles/utils/buttons.css

@@ -44,3 +44,37 @@
 	background-position: 50% 50%;
 	background-size: 2.3rem 2.3rem;
 }
+
+button:where(.tooltip, .tooltip-left)[aria-label]:where(:hover, :focus) {
+	--arrow-size: 1rem;
+
+	&::before {
+		content: '';
+		width: var(--arrow-size);
+		height: var(--arrow-size);
+		position: absolute;
+		background: var(--sk-text-3);
+		top: calc(100% + var(--arrow-size) * 0.5);
+		left: calc(50% - var(--arrow-size) * 0.5);
+		rotate: 45deg;
+	}
+
+	&::after {
+		content: attr(aria-label);
+		position: absolute;
+		top: calc(100% + var(--arrow-size));
+		left: 50%;
+		translate: -50% 0;
+		background: var(--sk-text-3);
+		color: var(--sk-back-4);
+		padding: 0.5em 0.8em;
+		border-radius: var(--sk-border-radius);
+		font: var(--sk-font-ui-small);
+		text-transform: none;
+		white-space: pre;
+	}
+
+	&.tooltip-left::after {
+		translate: calc(-100% + 2rem) 0;
+	}
+}