Use this small library when you need to add annotations to your website.
- show up / hide annotation on a element click
- dynamically inserted texts
Go to Demo page.
- Add
annotations.js
orannotations.ts
code to your website. - Add styles from
annotations.css
. - Place markup at the bottom of your html file, before closing body tag (it uses fixed positioning).
<div class="annotation-wrapper">
<button type="button" class="annotation-close-btn" aria-label="close annotation"></button>
<p class="annotation-text" id="annotation-text"></p>
</div>
- Place your annotation texts in the
annotationTexts
object. - Name keys as you like.
<script>
const annotationTexts = {
text1: "First text example.",
secondText: "Second example with line break. </br>Annotation launched by Button nr 2 and Button nr 3.",
anotherOne: "List example. </br><ul style='list-style-type: none;'><li>First list item.</li><li>Second list item.</li><li>Third list item.</li>"
}
</script>
Add to clickable elements that you want to annotate:
.annotation-btn
class.data-text="key-name"
attribute. Make sure its value matches corresponding key inannotationTexts
object.aria-describedby=""
attribute with no value.
Check out demo examples in index.html
.
- New JavaScript and TypeScript logic
- Id and data-opener attribute removed from the markup
- TypeScript version
- IIFE
- "use strict"
Custom properties names to
--annotation-color-main
--annotation-color-text
Desktop: Chrome 38+ ✓ Firefox 25+ ✓ Safari 8+ ✓ Opera 25+ ✓ Edge 12+ ✓ IE 11+ ✓
Mobile: Chrome Android 38+ ✓ Firefox Android 25+ ✓ iOS Safari 8+ ✓ Opera Android 25+ ✓
This project is available under the MIT license.
Jacek Jarczok