Added styling for mermaid tooltips

Adjustments of tooltip positioning for large documents Documentation of tooltips
2025-09-13 20:39:38 +02:00 · 2015-10-03 16:30:50 +02:00
parent b3fa6378bd
commit 8bc3bdd300
18 changed files with 258 additions and 98 deletions
--- a/test/examples/interactionAndTooltips.html
+++ b/test/examples/interactionAndTooltips.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+
+    <link rel="stylesheet" href="../../dist/mermaid.css"/>
+    <script src="../../dist/mermaid.js"></script>
+    <style>
+        body{
+            background-color: #89896f;
+        }
+
+    </style>
+    <script>
+
+        function callback(id){
+            alert(id);
+        }
+        function callback2(id){
+            alert('x'+id);
+        }
+    </script>
+</head>
+    <body>
+    <h1>Links to callbacks</h1>
+    A has a tooltip
+    <div class="mermaid" id="i211">
+    graph LR;
+        A-->B;
+        B-->C;
+        click A callback "Tooltip"
+        click B "http://www.github.com" "This is a link"
+        click C callback "Tooltip quite long tooltip. So long that several rows are required... Not just two rows..."
+    </div>
+
+    <h1>Links to urls</h1>
+    <div class="mermaid" id="i213">
+        graph LR;
+            A-->B
+            B-->C
+            click A callback2 "Tooltip3"
+    </div>
+    <div class="mermaid" id="i213">
+        graph LR;
+        subgraph S1
+            a-->b
+        end
+        subgraph S2
+            c-->d
+            c-->d
+        end
+
+    </div>
+
+    </body>
+</html>