src_aurelia-bodylight-plugin/docs/index3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bodylight Web Components 2.0 Reference</title>
<style>
img{max-width:100%}
.abbr_dialog {
display:none;
position:absolute;
}
.abbr_dialog_show {
display: block !important;
border: 1px black solid;
border-radius:2px;
background-color: white;
padding:10px;
max-width:50%;
} </style>
</head>
<body>
Test of P element DIALOG element and ABBR element.
<h1>Test1</h1>
<p>
paragraph with <abbr>cytochrome</abbr><dialog>Cytochrome is protein with hem</dialog>
and another <abbr>protein</abbr><dialog>Protein is macromolecule</dialog> are important in molecular biology.
</p>
<h1>Test2</h1>
<p>
paragraph with <div style="display:inline;"><abbr>cytochrome</abbr><dialog>Cytochrome is protein with hem</dialog></div>
and another <div style="display:inline;"><abbr>protein</abbr><dialog>Protein is macromolecule</dialog></div> are important in molecular biology.
</p>
<h1>Test3</h1>
<p>
paragraph with <abbr>cytochrome</abbr><div class="abbr_dialog abbr_dialog_show">Cytochrome is protein with hem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Etiam bibendum elit eget erat. Integer malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Proin in tellus sit amet nibh dignissim sagittis. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Aliquam erat volutpat. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Aenean placerat. Pellentesque sapien. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Donec quis nibh at felis congue commodo. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Quisque porta. </div>
and another <abbr>protein</abbr><div class="abbr_dialog">Protein is macromolecule</div> are important in molecular biology.
</p>
</body>
</html>