Added styling for mermaid tooltips

Adjustments of tooltip positioning for large documents

Documentation of tooltips

dist/mermaid.css

@@ -254,7 +254,16 @@ text {
   font-family: 'trebuchet ms', verdana, arial;
   font-size: 14px;
 }
-
-.mermaid {
-  width: auto;
+div.mermaidTooltip {
+  position: absolute;
+  text-align: center;
+  max-width: 200px;
+  padding: 2px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 12px;
+  background: #ffffde;
+  border: 1px solid #aaaa33;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 100;
 }

dist/mermaid.forest.css

@@ -256,3 +256,16 @@ text {
   font-family: 'trebuchet ms', verdana, arial;
   font-size: 14px;
 }
+div.mermaidTooltip {
+  position: absolute;
+  text-align: center;
+  max-width: 200px;
+  padding: 2px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 12px;
+  background: #cdffb2;
+  border: 1px solid #6eaa49;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 100;
+}

dist/mermaid.js

@@ -30678,7 +30678,9 @@ module.exports={
     "mermaid": "./bin/mermaid.js"
   },
   "scripts": {
-    "test": "./node_modules/.bin/gulp dist && ./node_modules/.bin/gulp test"
+    "watch": "watchify src/mermaid.js -o dist/mermaid.js",
+    "doc"  : "rm -r build;rm -r dist/www;gulp vartree;cp dist/www/all.html ../mermaid-pages/index.html;cp dist/mermaid.js ../mermaid-pages/javascripts/lib;cp dist/mermaid.forest.css ../mermaid-pages/stylesheets",
+    "test" : "./node_modules/.bin/gulp dist && ./node_modules/.bin/gulp test"
   },
   "repository": {
     "type": "git",
@@ -32728,7 +32730,7 @@ var setupToolTips = function(element){
                 .style("opacity", .9);
             tooltipElem.html(el.attr('title'))
                 .style("left", (rect.left+(rect.right-rect.left)/2) + "px")
-                .style("top", (rect.top-28) + "px");
+                .style("top", (rect.top-14+document.body.scrollTop) + "px");
             var el = d3.select(this);
             el.classed('hover',true);
 
@@ -37780,7 +37782,7 @@ exports.create = function(type, options) {
  * title: mermaidAPI
  * order: 5
  * ---
- * #mermaidAPI
+ * # mermaidAPI
  * This is the api to be used when handling the integration with the web page instead of using the default integration
  * (mermaid.js).
  *

dist/mermaid.slim.js

@@ -21462,7 +21462,9 @@ module.exports={
     "mermaid": "./bin/mermaid.js"
   },
   "scripts": {
-    "test": "./node_modules/.bin/gulp dist && ./node_modules/.bin/gulp test"
+    "watch": "watchify src/mermaid.js -o dist/mermaid.js",
+    "doc"  : "rm -r build;rm -r dist/www;gulp vartree;cp dist/www/all.html ../mermaid-pages/index.html;cp dist/mermaid.js ../mermaid-pages/javascripts/lib;cp dist/mermaid.forest.css ../mermaid-pages/stylesheets",
+    "test" : "./node_modules/.bin/gulp dist && ./node_modules/.bin/gulp test"
   },
   "repository": {
     "type": "git",
@@ -23512,7 +23514,7 @@ var setupToolTips = function(element){
                 .style("opacity", .9);
             tooltipElem.html(el.attr('title'))
                 .style("left", (rect.left+(rect.right-rect.left)/2) + "px")
-                .style("top", (rect.top-28) + "px");
+                .style("top", (rect.top-14+document.body.scrollTop) + "px");
             var el = d3.select(this);
             el.classed('hover',true);
 
@@ -28564,7 +28566,7 @@ exports.create = function(type, options) {
  * title: mermaidAPI
  * order: 5
  * ---
- * #mermaidAPI
+ * # mermaidAPI
  * This is the api to be used when handling the integration with the web page instead of using the default integration
  * (mermaid.js).
  *

dist/mermaidAPI.js

@@ -30345,7 +30345,9 @@ module.exports={
     "mermaid": "./bin/mermaid.js"
   },
   "scripts": {
-    "test": "./node_modules/.bin/gulp dist && ./node_modules/.bin/gulp test"
+    "watch": "watchify src/mermaid.js -o dist/mermaid.js",
+    "doc"  : "rm -r build;rm -r dist/www;gulp vartree;cp dist/www/all.html ../mermaid-pages/index.html;cp dist/mermaid.js ../mermaid-pages/javascripts/lib;cp dist/mermaid.forest.css ../mermaid-pages/stylesheets",
+    "test" : "./node_modules/.bin/gulp dist && ./node_modules/.bin/gulp test"
   },
   "repository": {
     "type": "git",
@@ -32395,7 +32397,7 @@ var setupToolTips = function(element){
                 .style("opacity", .9);
             tooltipElem.html(el.attr('title'))
                 .style("left", (rect.left+(rect.right-rect.left)/2) + "px")
-                .style("top", (rect.top-28) + "px");
+                .style("top", (rect.top-14+document.body.scrollTop) + "px");
             var el = d3.select(this);
             el.classed('hover',true);
 
@@ -37075,7 +37077,7 @@ exports.getNoteRect = function(){
  * title: mermaidAPI
  * order: 5
  * ---
- * #mermaidAPI
+ * # mermaidAPI
  * This is the api to be used when handling the integration with the web page instead of using the default integration
  * (mermaid.js).
  *

docs/content/flowchart.md

@@ -253,7 +253,7 @@ graph TB
 
 ## Interaction
 
-It is possible to bind a click event to a node:
+It is possible to bind a click event to a node, the click can lead to either a javascript callback or to a link which will be opened in a new browser tab.
 
 ```
 click nodeId callback
@@ -262,6 +262,34 @@ click nodeId callback
 * nodeId is the id of the node
 * callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.
 
+Examples of tooltip usage below:
+
+```
+<script>
+    var callback = function(){
+        alert('A callback was triggered');
+    }
+<script>
+```
+
+```
+graph LR;
+    A-->B;
+    click A callback "Tooltip for a callback"
+    click B "http://www.github.com" "This is a tooltip for a link"
+```
+
+
+The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.
+
+```mermaid
+graph LR;
+    A-->B;
+    click A callback "Tooltip"
+    click B "http://www.github.com" "This is a link"
+```
+<aside class="success">The tooltip functionality and the ability to link to urls are available from version 0.5.2.</aside>
+
 ## Styling and classes
 
 ### Styling links

docs/tpl/slate.html

@@ -49,6 +49,9 @@
         $(function () {
             setupLanguages(["shell", "javascript", "html", "css","mermaid"]);
         });
+        var callback = function(){
+            alert('A callback was triggered');
+        }
     </script>
 </head>
 

package.json

@@ -14,7 +14,9 @@
     "mermaid": "./bin/mermaid.js"
   },
   "scripts": {
-    "test": "./node_modules/.bin/gulp dist && ./node_modules/.bin/gulp test"
+    "watch": "watchify src/mermaid.js -o dist/mermaid.js",
+    "doc"  : "rm -r build;rm -r dist/www;gulp vartree;cp dist/www/all.html ../mermaid-pages/index.html;cp dist/mermaid.js ../mermaid-pages/javascripts/lib;cp dist/mermaid.forest.css ../mermaid-pages/stylesheets",
+    "test" : "./node_modules/.bin/gulp dist && ./node_modules/.bin/gulp test"
   },
   "repository": {
     "type": "git",

src/diagrams/flowchart/graphDb.js

@@ -257,7 +257,7 @@ var setupToolTips = function(element){
                 .style("opacity", .9);
             tooltipElem.html(el.attr('title'))
                 .style("left", (rect.left+(rect.right-rect.left)/2) + "px")
-                .style("top", (rect.top-28) + "px");
+                .style("top", (rect.top-14+document.body.scrollTop) + "px");
             var el = d3.select(this);
             el.classed('hover',true);
 

src/less/default/mermaid.less

@@ -7,4 +7,18 @@
 text {
   font-family: 'trebuchet ms', verdana, arial;
   font-size:14px;
+}
+
+div.mermaidTooltip {
+  position: absolute;
+  text-align: center;
+  max-width: 200px;
+  padding: 2px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 12px;
+  background: @secondBkg;
+  border: 1px solid @border2;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index:100;
 }

src/less/forest/mermaid.less

@@ -7,4 +7,18 @@
 text {
   font-family: 'trebuchet ms', verdana, arial;
   font-size:14px;
+}
+
+div.mermaidTooltip {
+  position: absolute;
+  text-align: center;
+  max-width: 200px;
+  padding: 2px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 12px;
+  background: @secondBkg;
+  border: 1px solid @border2;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index:100;
 }

src/mermaidAPI.js

@@ -3,7 +3,7 @@
  * title: mermaidAPI
  * order: 5
  * ---
- * #mermaidAPI
+ * # mermaidAPI
  * This is the api to be used when handling the integration with the web page instead of using the default integration
  * (mermaid.js).
  *

test/examples/interactionAndTooltips.html

@@ -5,39 +5,14 @@
 
     <link rel="stylesheet" href="../../dist/mermaid.css"/>
     <script src="../../dist/mermaid.js"></script>
-    <link rel="stylesheet" href="../../dist/mermaid.css"/>
     <style>
         body{
-            background-color: #2d2d22;
-        }
-        div.mermaidTooltip {
-            position: absolute;
-            text-align: center;
-            width: 60px;
-            height: 28px;
-            padding: 2px;
-            font: 12px sans-serif;
-            background: lightsteelblue;
-            border: 1px solid black;
-            border-radius: 3px;
-            pointer-events: none;
+            background-color: #89896f;
         }
+
     </style>
     <script>
-        function itsTime(){
 
-            function getScreenCoords(x, y, ctm) {
-                var xn = ctm.e + x*ctm.a;
-                var yn = ctm.f + y*ctm.d;
-                return { x: xn, y: yn };
-            }
-
-
-            setTimeout(function(){
-
-            },250);
-
-        }
         function callback(id){
             alert(id);
         }
@@ -46,7 +21,7 @@
         }
     </script>
 </head>
-    <body onload="itsTime()">
+    <body>
     <h1>Links to callbacks</h1>
     A has a tooltip
     <div class="mermaid" id="i211">
@@ -55,7 +30,7 @@
         B-->C;
         click A callback "Tooltip"
         click B "http://www.github.com" "This is a link"
-        click C callback "Tooltip C1"
+        click C callback "Tooltip quite long tooltip. So long that several rows are required... Not just two rows..."
     </div>
 
     <h1>Links to urls</h1>