feat: MermaidChart tooltip

components.json

@@ -1,17 +1,17 @@
 {
-  "$schema": "https://next.shadcn-svelte.com/schema.json",
-  "style": "new-york",
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/app.postcss",
-    "baseColor": "slate"
-  },
-  "aliases": {
-    "components": "$lib/components",
-    "utils": "$lib/utils",
-    "ui": "$lib/components/ui",
-    "hooks": "$lib/hooks"
-  },
-  "typescript": true,
-  "registry": "https://next.shadcn-svelte.com/registry"
+	"$schema": "https://next.shadcn-svelte.com/schema.json",
+	"style": "new-york",
+	"tailwind": {
+		"config": "tailwind.config.js",
+		"css": "src/app.postcss",
+		"baseColor": "slate"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks"
+	},
+	"typescript": true,
+	"registry": "https://next.shadcn-svelte.com/registry"
 }

src/lib/components/Editor.svelte

@@ -8,6 +8,8 @@
 </script>
 
 <script lang="ts">
+  import McTooltip from '$/components/MCTooltip.svelte';
+  import { Button } from '$/components/ui/button';
   import { env } from '$/util/env';
   import type { EditorMode } from '$lib/types';
   import { initEditor } from '$lib/util/monacoExtra';
@@ -21,7 +23,6 @@
   import monacoJsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
   import { onDestroy, onMount } from 'svelte';
   import ExclamationCircleIcon from '~icons/material-symbols/error-outline-rounded';
-  import { Button } from './ui/button';
 
   let divElement: HTMLDivElement | undefined = $state();
   let editor: monaco.editor.IStandaloneCodeEditor | undefined;
@@ -150,12 +151,12 @@
           </div>
         </div>
         {#if env.isEnabledMermaidChartLinks}
-          <Button
-            variant="accent"
-            size="sm"
-            title="Repair with Mermaid AI"
-            href={$urlsStore.mermaidChart.save}
-            ><img class="size-4" src="./mermaidchart-logo.svg" alt="Mermaid Chart" />AI Repair</Button>
+          <McTooltip>
+            <Button variant="accent" size="sm" href={$urlsStore.mermaidChart.save}>
+              <img class="size-4" src="./mermaidchart-logo.svg" alt="Mermaid Chart" />
+              AI Repair
+            </Button>
+          </McTooltip>
         {/if}
       </div>
       <div class="max-h-32 overflow-auto bg-muted p-2 font-mono">

src/lib/components/MCTooltip.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import * as Tooltip from '$lib/components/ui/tooltip';
+  import type { Snippet } from 'svelte';
+  import ExternalLinkIcon from '~icons/material-symbols/open-in-new-rounded';
+
+  let { children }: { children: Snippet } = $props();
+</script>
+
+<Tooltip.Provider>
+  <Tooltip.Root delayDuration={100}>
+    <Tooltip.Trigger>
+      {@render children()}
+    </Tooltip.Trigger>
+    <Tooltip.Content>
+      <p class="flex items-center gap-2">
+        <ExternalLinkIcon /> Opens a new tab in Mermaid Chart
+      </p>
+    </Tooltip.Content>
+  </Tooltip.Root>
+</Tooltip.Provider>

src/lib/components/MainMenu.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import McTooltip from '$/components/MCTooltip.svelte';
   import * as Popover from '$/components/ui/popover';
   import { Switch } from '$/components/ui/switch';
   import { env } from '$/util/env';
@@ -14,6 +15,7 @@
   import MoonIcon from '~icons/material-symbols/nights-stay-outline';
   import PlaygroundIcon from '~icons/material-symbols/shape-line-outline';
   import SunIcon from '~icons/material-symbols/sunny-rounded';
+
   const menuItems = [
     { label: 'New Diagram', icon: AddIcon, href: '/' },
     { label: 'Home', icon: HomeIcon, href: 'https://mermaid.js.org/' },
@@ -65,12 +67,14 @@
           onCheckedChange={(dark) => setMode(dark ? 'dark' : 'light')} />
       </div>
       {#if env.isEnabledMermaidChartLinks}
-        {@render menuItem({
-          label: 'Edit in Playground',
-          icon: PlaygroundIcon,
-          href: $urlsStore.mermaidChart.playground,
-          class: 'text-accent bg-background hover:bg-background/50'
-        })}
+        <McTooltip>
+          {@render menuItem({
+            label: 'Edit in Playground',
+            icon: PlaygroundIcon,
+            href: $urlsStore.mermaidChart.playground,
+            class: 'text-accent bg-background hover:bg-background/50'
+          })}
+        </McTooltip>
       {/if}
     </div>
   </Popover.Content>

src/lib/components/Navbar.svelte

@@ -7,6 +7,8 @@
 </script>
 
 <script lang="ts">
+  import MainMenu from '$/components/MainMenu.svelte';
+  import McTooltip from '$/components/MCTooltip.svelte';
   import { Button } from '$/components/ui/button';
   import { Separator } from '$/components/ui/separator';
   import { Switch } from '$/components/ui/switch';
@@ -18,7 +20,6 @@
   import GithubIcon from '~icons/fa-brands/github';
   import CloseIcon from '~icons/material-symbols/close-rounded';
   import DropdownNavMenu from './DropdownNavMenu.svelte';
-  import MainMenu from './MainMenu.svelte';
 
   interface Props {
     children: Snippet;
@@ -103,30 +104,32 @@
         Live Editor
       </a>
       {#if env.isEnabledMermaidChartLinks}
-        <div class=" hidden items-center justify-center gap-4 md:flex">
-          <Separator orientation="vertical" />
-          <Switch
-            id="editorMode"
-            class="data-[state=checked]:bg-secondary"
-            checked={isReferral}
-            onclick={() => {
-              logEvent('playgroundToggle', { isReferred: isReferral });
-              // Wait for the event to be logged
-              setTimeout(() => {
-                window.open(
-                  $urlsStore.mermaidChart.playground,
-                  '_self',
-                  // Do not send referrer header, if the user already came from playground
-                  isReferral ? 'noreferrer' : ''
-                );
-              }, 100);
-            }} />
+        <McTooltip>
+          <div class=" hidden items-center justify-center gap-4 md:flex">
+            <Separator orientation="vertical" />
+            <Switch
+              id="editorMode"
+              class="data-[state=checked]:bg-secondary"
+              checked={isReferral}
+              onclick={() => {
+                logEvent('playgroundToggle', { isReferred: isReferral });
+                // Wait for the event to be logged
+                setTimeout(() => {
+                  window.open(
+                    $urlsStore.mermaidChart.playground,
+                    '_self',
+                    // Do not send referrer header, if the user already came from playground
+                    isReferral ? 'noreferrer' : ''
+                  );
+                }, 100);
+              }} />
 
-          <a href={$urlsStore.mermaidChart.playground} class="whitespace-nowrap">
-            Playground <span class="hidden text-sm opacity-50 lg:inline"
-              >- more features, no account required</span>
-          </a>
-        </div>
+            <a href={$urlsStore.mermaidChart.playground} class="whitespace-nowrap">
+              Playground <span class="hidden text-sm opacity-50 lg:inline"
+                >- more features, no account required</span>
+            </a>
+          </div>
+        </McTooltip>
       {/if}
     </div>
   </div>

src/lib/components/ui/tooltip/index.ts

@@ -0,0 +1,18 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Content from "./tooltip-content.svelte";
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+const Provider = TooltipPrimitive.Provider;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Provider,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
+};

src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		...restProps
+	}: TooltipPrimitive.ContentProps = $props();
+</script>
+
+<TooltipPrimitive.Content
+	bind:ref
+	{sideOffset}
+	class={cn(
+		"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs",
+		className
+	)}
+	{...restProps}
+/>

src/routes/edit/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import History from '$/components/History/History.svelte';
+  import McTooltip from '$/components/MCTooltip.svelte';
   import PanZoomToolbar from '$/components/PanZoomToolbar.svelte';
   import Share from '$/components/Share.svelte';
   import SyncRoughToolbar from '$/components/SyncRoughToolbar.svelte';
@@ -139,10 +140,12 @@
     </Toggle>
     <Share />
     {#if env.isEnabledMermaidChartLinks}
-      <Button variant="accent" size="sm" href={$urlsStore.mermaidChart.save} target="_blank">
-        <img class="size-4" src="./mermaidchart-logo.svg" alt="Mermaid Chart" />
-        Save diagram
-      </Button>
+      <McTooltip>
+        <Button variant="accent" size="sm" href={$urlsStore.mermaidChart.save} target="_blank">
+          <img class="size-4" src="./mermaidchart-logo.svg" alt="Mermaid Chart" />
+          Save diagram
+        </Button>
+      </McTooltip>
     {/if}
   </Navbar>
   <div class="flex flex-1 overflow-hidden">