feat(dev-overlay): Add a tooltip on plugin hover / focus (#8978)

* feat(dev-overlay): Add a tooltip on plugin hover / focus * chore: changeset * test: add test
withastro · Nov 1, 2023 · cc3278b · cc3278b
1 parent 40a0616
commit cc3278b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 3 deletions.
diff --git a/.changeset/twenty-shirts-smile.md b/.changeset/twenty-shirts-smile.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+In the dev overlay, add a tooltip showing the currently hovered / focused plugin's name
diff --git a/packages/astro/e2e/dev-overlay.test.js b/packages/astro/e2e/dev-overlay.test.js
@@ -15,14 +15,25 @@ test.afterAll(async () => {
 	await devServer.stop();
 });
 
-test.describe('Dev Overlay zzz', () => {
+test.describe('Dev Overlay', () => {
 	test('dev overlay exists in the page', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
 		const devOVerlay = page.locator('astro-dev-overlay');
 		await expect(devOVerlay).toHaveCount(1);
 	});
 
+	test('shows plugin name on hover', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const overlay = page.locator('astro-dev-overlay');
+		const pluginButton = overlay.locator('button[data-plugin-id="astro"]');
+		const pluginButtonTooltip = pluginButton.locator('.item-tooltip');
+		await pluginButton.hover();
+
+		await expect(pluginButtonTooltip).toBeVisible();
+	});
+
 	test('can open Astro plugin', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 

diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
@@ -97,7 +97,7 @@ export class AstroDevOverlay extends HTMLElement {
 				overflow: hidden;
 			}
 
-			#dev-bar #bar-container .item:hover, #dev-bar #bar-container .item:focus {
+			#dev-bar #bar-container .item:hover, #dev-bar #bar-container .item:focus-visible {
 				background: rgba(27, 30, 36, 1);
 				cursor: pointer;
 				outline-offset: -3px;
@@ -116,6 +116,33 @@ export class AstroDevOverlay extends HTMLElement {
 				background: rgba(71, 78, 94, 1);
 			}
 
+			#dev-bar .item-tooltip {
+				background: linear-gradient(0deg, #13151A, #13151A), linear-gradient(0deg, #343841, #343841);
+				border: 1px solid rgba(52, 56, 65, 1);
+				border-radius: 4px;
+				padding: 4px 8px;
+				position: absolute;
+				top: -40px;
+				opacity: 0;
+				transition: opacity 0.2s ease-in-out 0s;
+				pointer-events: none;
+			}
+
+			#dev-bar .item-tooltip::after{
+				content: '';
+				position: absolute;
+				left: calc(50% - 5px);
+				bottom: -6px;
+				border-left: 5px solid transparent;
+				border-right: 5px solid transparent;
+				border-top: 5px solid #343841;
+			}
+
+			#dev-bar .item:hover .item-tooltip, #dev-bar .item:not(.active):focus-visible .item-tooltip {
+				transition: opacity 0.2s ease-in-out 200ms;
+				opacity: 1;
+			}
+
 			#dev-bar #bar-container .item.active .notification {
 				border-color: rgba(71, 78, 94, 1);
 			}
@@ -374,7 +401,7 @@ export class AstroDevOverlay extends HTMLElement {
 	getPluginTemplate(plugin: DevOverlayPlugin) {
 		return `<button class="item" data-plugin-id="${plugin.id}">
 				<div class="icon">${this.getPluginIcon(plugin.icon)}<div class="notification"></div></div>
-				<span class="sr-only">${plugin.name}</span>
+				<span class="item-tooltip">${plugin.name}</span>
 			</button>`;
 	}