Added styling for mermaid tooltips

Adjustments of tooltip positioning for large documents

Documentation of tooltips

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).
  *