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 = `
+
+ 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);
From ff786b4ef8267fd1dbb962328c2f4e6da9085b05 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod
Best for collaboration
+ {{ ['Playground', 'Free', 'Open Source'][index] }}
+
+ {{
+ [
+ 'Basic features, no login',
+ 'Advanced features, free account',
+ 'Code only, no login',
+ ][index]
+ }}
+
- {{ ['Playground', 'Free', 'Open Source'][index] }}
+ {{ columnTitles[index] }}
- {{
- [
- 'Basic features, no login',
- 'Advanced features, free account',
- 'Code only, no login',
- ][index]
- }}
+ {{ columnDescriptions[index] }}
- {{ columnTitles[index] }}
+ {{ column.title }}
- {{ columnDescriptions[index] }}
+ {{ column.description }}
Best for collaboration Best for collaboration Best for collaboration
{{ column.title }}
+
+
+ {{ featureName }}
+
+
{{ featureName }}