From b81b66513734b9fedae6b964f79e4c1e0a14ba9e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 9 Apr 2025 15:24:23 +0530
Subject: [PATCH] feat: Add tooltip for MermaidChart links

---
 .cspell/contributors.txt                      |  4 +-
 .cspell/mermaid-terms.txt                     |  5 +-
 .../src/docs/.vitepress/components/TopBar.vue |  2 +-
 .../src/docs/.vitepress/theme/index.ts        | 83 +++++++++++++++++++
 4 files changed, 89 insertions(+), 5 deletions(-)

diff --git a/.cspell/contributors.txt b/.cspell/contributors.txt
index b7f52f8d0..80f4df22a 100644
--- a/.cspell/contributors.txt
+++ b/.cspell/contributors.txt
@@ -2,8 +2,10 @@
 Ashish Jain
 cpettitt
 Dong Cai
+knsv
+Knut Sveidqvist
 Nikolay Rozhkov
 Peng Xiao
 Per Brolin
+Sidharth Vinod
 subhash-halder
-Vinod Sidharth
diff --git a/.cspell/mermaid-terms.txt b/.cspell/mermaid-terms.txt
index cb6db41de..69d2c3eb9 100644
--- a/.cspell/mermaid-terms.txt
+++ b/.cspell/mermaid-terms.txt
@@ -13,11 +13,11 @@ gitgraph
 gzipped
 handDrawn
 kanban
-knsv
-Knut
 marginx
 marginy
 Markdownish
+mermaidchart
+mermaidchart
 mermaidjs
 mindmap
 mindmaps
@@ -35,7 +35,6 @@ sandboxed
 siebling
 statediagram
 substate
-Sveidqvist
 unfixable
 Viewbox
 viewports
diff --git a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
index 0914d808e..c37c96e8f 100644
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -115,7 +115,7 @@ onMounted(() => {
 
 <template>
   <div
-    :class="[design === 1 ? 'bg-gradient-to-r from-[#bd34fe] to-[#ff3670] ' : 'bg-[#E0095F]']"
+    :class="[design === 1 ? 'bg-gradient-to-r from-[#bd34fe] to-[#ff3670]' : 'bg-[#E0095F]']"
     class="mb-4 w-full top-bar flex p-2"
   >
     <p class="w-full tracking-wide fade-text text-sm">
diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts
index 3ec200937..383291799 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -17,6 +17,81 @@ import Theme from 'vitepress/theme';
 import { h } from 'vue';
 import '../style/main.css';
 
+// Add tooltips to Mermaid Chart buttons
+const addMermaidChartTooltips = () => {
+  const tooltipStyle = document.createElement('style');
+  tooltipStyle.textContent = `
+    .mermaid-chart-tooltip {
+      position: absolute;
+      background: black;
+      color: white;
+      padding: 0.3rem 0.6rem;
+      border-radius: 0.5rem;
+      font-size: 1rem;
+      pointer-events: none;
+      z-index: 1000;
+      max-width: 20rem;
+      text-align: center;
+      opacity: 0;
+      transition: opacity 0.3s ease, transform 0.3s ease;
+      transform: translateY(-90%);
+      margin-top: -0.5rem;
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
+    }
+    .mermaid-chart-tooltip.visible {
+      opacity: 1;
+      transform: translateY(-100%);
+    }
+    .mermaid-chart-tooltip svg {
+      width: 1.25rem;
+      height: 1.25rem;
+      fill: currentColor;
+    }
+  `;
+  document.head.appendChild(tooltipStyle);
+
+  const tooltip = document.createElement('div');
+  tooltip.className = 'mermaid-chart-tooltip';
+  document.body.appendChild(tooltip);
+
+  let currentTarget: HTMLElement | null = null;
+
+  const showTooltip = (target: HTMLElement) => {
+    currentTarget = target;
+    const rect = target.getBoundingClientRect();
+    tooltip.innerHTML = `
+      <span class="mdi mdi-open-in-new"></span>
+      Opens in MermaidChart.com
+    `;
+    tooltip.style.left = rect.left + rect.width / 2 - tooltip.offsetWidth / 2 + 'px';
+    tooltip.style.top = rect.top + 'px';
+    tooltip.classList.add('visible');
+  };
+
+  const hideTooltip = () => {
+    currentTarget = null;
+    tooltip.classList.remove('visible');
+  };
+
+  document.addEventListener('mouseover', (e) => {
+    const target = e.target as HTMLElement;
+    if (
+      target.matches('a[href*="mermaidchart.com"]') ||
+      target.matches('button[onclick*="mermaidchart.com"]')
+    ) {
+      showTooltip(target);
+    }
+  });
+
+  document.addEventListener('mouseout', (e) => {
+    if (!currentTarget?.contains(e.relatedTarget as HTMLElement)) {
+      hideTooltip();
+    }
+  });
+};
+
 export default {
   ...DefaultTheme,
   Layout() {
@@ -31,6 +106,14 @@ export default {
     // register global components
     app.component('Mermaid', Mermaid);
     app.component('Contributors', Contributors);
+
+    // Add tooltips after app is mounted
+    app.mixin({
+      mounted() {
+        addMermaidChartTooltips();
+      },
+    });
+
     router.onBeforeRouteChange = (to) => {
       try {
         const url = new URL(window.location.origin + to);