From 8cf82652854fe92946779cf7b4c1161d84e83815 Mon Sep 17 00:00:00 2001
From: Teresa Tarn <teresa.tarn@kapost.com>
Date: Wed, 25 Jul 2018 11:07:26 -0400
Subject: [PATCH 1/2] Updated flowchart docs section about click events

---
 content/flowchart.md | 52 ++++++++++++++++++++++++++------------------
 1 file changed, 31 insertions(+), 21 deletions(-)

diff --git a/content/flowchart.md b/content/flowchart.md
index 00da49f..dabd951 100644
--- a/content/flowchart.md
+++ b/content/flowchart.md
@@ -200,36 +200,46 @@ graph TB
 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
-```
-
-* 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.
+click nodeId callbackFunction "Tooltip text"
+click nodeId link "Tooltip text"
+```
+
+* `nodeId` - id of the node
+* `callbackFunction` - name of a javascript function defined on the page displaying the graph. The function will be called with the `nodeId` as parameter.
+* `link` - url of the page that will open in a new browser tab
+* `"Tooltip text"` (optional) - text that will display in the tooltip when hovering over the node. It must be defined in quotes. Tooltip styling is not set by default but can be defined with the class `.mermaidTooltip`, such as:
+  ```
+    .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;
+    }
+  ```
 
-Examples of tooltip usage below:
+### Examples:
 
 ```
+# Example of a callback function to be defined on the page.
 <script>
-    var callback = function(){
+    var callbackFunction = function(nodeId){
         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"
+</script>
 ```
 
-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"
+    graph LR;
+      A-->B;
+      click A callbackFunction "Tooltip for a callback"
+      click B "http://www.github.com" "This is a tooltip for node that will open a new window on click"
 ```
 > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
 

From 20d493164624912f34dcfcf760725e7457ea29bb Mon Sep 17 00:00:00 2001
From: Teresa Tarn <teresa.tarn@kapost.com>
Date: Wed, 25 Jul 2018 11:07:41 -0400
Subject: [PATCH 2/2] Added .mermaidTooltip styling

---
 content/book.json          |  1 +
 content/styles/website.css | 14 ++++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/content/book.json b/content/book.json
index 5255f42..ce53d4d 100644
--- a/content/book.json
+++ b/content/book.json
@@ -10,6 +10,7 @@
         "./scripts/index.js"
       ],
       "css": [
+        "./styles/website.css"
       ]
     }
   }
diff --git a/content/styles/website.css b/content/styles/website.css
index 2fcc582..8738923 100644
--- a/content/styles/website.css
+++ b/content/styles/website.css
@@ -5,3 +5,17 @@ html {
 .gitbook-link {
     display: none !important;
 }
+
+.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;
+}