Simple Text Annotations

Use this small library when you need to add annotations to your website.

Features

• show up / hide annotation on a element click
• dynamically inserted texts
  
  

Screenshot

Demo

Go to Demo page.

Installation

• Add annotations.js or annotations.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>

Usage

1. JavaScript

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

2. HTML

Add to clickable elements that you want to annotate:

• .annotation-btn class.
• data-text="key-name" attribute. Make sure its value matches corresponding key in annotationTexts object.
• aria-describedby="" attribute with no value.
  
  

Example

Check out demo examples in index.html.

Changelog

- 2021-03-16

Changed

• New JavaScript and TypeScript logic
• Id and data-opener attribute removed from the markup

- 2021-03-09

Added

• TypeScript version

- 2021-03-01

Added

• IIFE
• "use strict"

- 2021-02-17

Changed

Custom properties names to

--annotation-color-main
--annotation-color-text

Browser Support

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+ ✓  

License

This project is available under the MIT license.

Contact

Jacek Jarczok