Text Annotation Solution For Websites Using TypeScript and Vanilla JavaScript

Text annotation solution for websites using TypeScript and Vanilla JavaScript annotate text within the document using the regular button element.

It highlights and underlines text inside a button element and displays details in the lower annotation bar when clicked.

Features:

Show/hide annotation with one click.
Dynamically inserted texts.
It can be accessed through the keyboard.

How to make use of it:

1. Load the Annotations.js JavaScript library within the doc.

<link rel="stylesheet" href="./css/annotations.css" />
<script src="./js/annotations.js" defer></script>

2. Define your annotation text.

const annotationTexts = {
      text1: "Text Annotation Here.",
      text2: "HTML Content </br>Is Supported As Well",
      // ...
}

2. Add the annotation-btn to your button component and outline the annotation within the data-text attribute as follows:

<button type="button" 
        class="annotation-btn" 
        id="annotation-btn-1" 
        data-text="text1" 
        aria-describedby="">
        Example 1
</button>
<button type="button" 
        class="annotation-btn" 
        id="annotation-btn-2" 
        data-text="text2" 
        aria-describedby="">
        Example 2
</button>

3. Create the HTML for the annotation bar.

<div class="annotation-wrapper" data-opener="none">
  <button type="button" class="annotation-close-btn" aria-label="close annotation"></button>
  <p class="annotation-text" id="annotation-text"></p>
</div>

Simple Text Annotation JavaScript Library, Simple Text Annotations Plugin/Github, image annotation javascript library, javascript annotation library