Files
mermaid/test/examples/interactionAndTooltips.html
knsv 8bc3bdd300 Added styling for mermaid tooltips
Adjustments of tooltip positioning for large documents

Documentation of tooltips
2015-10-03 16:30:50 +02:00

57 lines
1.1 KiB
HTML

<!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>