marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-21 16:29:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added styling for mermaid tooltips

Browse Source 
Adjustments of tooltip positioning for large documents

Documentation of tooltips
This commit is contained in:
knsv
2015-10-03 16:30:50 +02:00
parent b3fa6378bd
commit 8bc3bdd300
18 changed files with 258 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
test/examples/links.html → test/examples/interactionAndTooltips.html
View File

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