Added styling for mermaid tooltips

Adjustments of tooltip positioning for large documents

Documentation of tooltips

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