From 9e2bbf4bebe66b085f3b6e55c97ba317ce69797e Mon Sep 17 00:00:00 2001
From: Charlie Marsh <charlie.r.marsh@gmail.com>
Date: Wed, 2 Aug 2023 21:41:07 -0400
Subject: [PATCH] Add a simple tooltip to the sidebar (#6295)

## Summary

Not perfect, but IMO helpful:

<img width="1792" alt="Screen Shot 2023-08-02 at 9 29 24 PM"
src="https://github.com/astral-sh/ruff/assets/1309177/e613e918-75cb-475e-9ea4-f833d1a0b5f6">

<img width="1792" alt="Screen Shot 2023-08-02 at 9 29 20 PM"
src="https://github.com/astral-sh/ruff/assets/1309177/bb3efdfe-40e1-45b5-b774-082521b2d214">
---
 playground/src/Editor/PrimarySideBar.tsx   |  2 ++
 playground/src/Editor/SecondarySideBar.tsx |  4 ++++
 playground/src/Editor/ShareButton.tsx      |  4 +---
 playground/src/Editor/SideBar.tsx          | 26 ++++++++++++++++++++--
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/playground/src/Editor/PrimarySideBar.tsx b/playground/src/Editor/PrimarySideBar.tsx
index f4be0292d6..de4db82b0b 100644
--- a/playground/src/Editor/PrimarySideBar.tsx
+++ b/playground/src/Editor/PrimarySideBar.tsx
@@ -16,6 +16,7 @@ export default function PrimarySideBar({
     <SideBar position="left">
       <SideBarEntry
         title="Source"
+        position={"left"}
         onClick={() => onSelectTool("Source")}
         selected={selected == "Source"}
       >
@@ -24,6 +25,7 @@ export default function PrimarySideBar({
 
       <SideBarEntry
         title="Settings"
+        position={"left"}
         onClick={() => onSelectTool("Settings")}
         selected={selected == "Settings"}
       >
diff --git a/playground/src/Editor/SecondarySideBar.tsx b/playground/src/Editor/SecondarySideBar.tsx
index 721f6fec25..8cece6e0ce 100644
--- a/playground/src/Editor/SecondarySideBar.tsx
+++ b/playground/src/Editor/SecondarySideBar.tsx
@@ -20,6 +20,7 @@ export default function SecondarySideBar({
     <SideBar position="right">
       <SideBarEntry
         title="Format (alpha)"
+        position={"right"}
         selected={selected === SecondaryTool.Format}
         onClick={() => onSelected(SecondaryTool.Format)}
       >
@@ -28,6 +29,7 @@ export default function SecondarySideBar({
 
       <SideBarEntry
         title="AST"
+        position={"right"}
         selected={selected === SecondaryTool.AST}
         onClick={() => onSelected(SecondaryTool.AST)}
       >
@@ -36,6 +38,7 @@ export default function SecondarySideBar({
 
       <SideBarEntry
         title="Tokens"
+        position={"right"}
         selected={selected === SecondaryTool.Tokens}
         onClick={() => onSelected(SecondaryTool.Tokens)}
       >
@@ -44,6 +47,7 @@ export default function SecondarySideBar({
 
       <SideBarEntry
         title="Formatter IR"
+        position={"right"}
         selected={selected === SecondaryTool.FIR}
         onClick={() => onSelected(SecondaryTool.FIR)}
       >
diff --git a/playground/src/Editor/ShareButton.tsx b/playground/src/Editor/ShareButton.tsx
index 0968c1b4cb..4938639e50 100644
--- a/playground/src/Editor/ShareButton.tsx
+++ b/playground/src/Editor/ShareButton.tsx
@@ -22,9 +22,7 @@ export default function ShareButton({ onShare }: { onShare?: () => void }) {
       >
         Share
       </span>
-      <span aria-hidden="false">
-        Copied!
-      </span>
+      <span aria-hidden="false">Copied!</span>
     </AstralButton>
   ) : (
     <AstralButton
diff --git a/playground/src/Editor/SideBar.tsx b/playground/src/Editor/SideBar.tsx
index cdee7291c0..4651c59da5 100644
--- a/playground/src/Editor/SideBar.tsx
+++ b/playground/src/Editor/SideBar.tsx
@@ -23,6 +23,8 @@ export interface SideBarEntryProps {
   title: string;
   selected: boolean;
   children: ReactNode;
+  position: "left" | "right";
+
   onClick?(): void;
 }
 
@@ -31,13 +33,14 @@ export function SideBarEntry({
   onClick,
   children,
   selected,
+  position,
 }: SideBarEntryProps) {
   return (
     <li
-      title={title}
+      aria-label={title}
       onClick={onClick}
       role="button"
-      className={`py-4 px-2 relative flex items-center flex-col fill-white text-white ${
+      className={`group py-4 px-2 relative flex items-center justify-center flex-col fill-white text-white ${
         selected ? "opacity-100" : "opacity-50 hover:opacity-100"
       }`}
     >
@@ -45,6 +48,25 @@ export function SideBarEntry({
       {selected && (
         <span className="absolute start-0 inset-y-0 bg-white w-0.5"></span>
       )}
+
+      <Tooltip position={position}>{title}</Tooltip>
     </li>
   );
 }
+
+interface TooltipProps {
+  children: ReactNode;
+  position: "left" | "right";
+}
+
+function Tooltip({ children, position }: TooltipProps) {
+  return (
+    <span
+      className={`z-10 absolute w-100 rounded dark:border-[1px] dark:border-white bg-space dark:bg-white px-2 py-1 hidden text-xs text-white dark:text-black group-hover:flex whitespace-nowrap ${
+        position === "right" ? "right-[52px]" : "left-[52px]"
+      }`}
+    >
+      {children}
+    </span>
+  );
+}