Tiny jQuery Plugin For Annotating HTML Elements - Annotations

Annotations is a super tiny jQuery plugin used to generate an customizable annotation at the right bottom of a specified container. Great for displaying reference and copyright text on your images.

How to use it:

1. Place jQuery library and the jQuery Annotations plugin's JavaScript file at the end of the html document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.annotate.js"></script>

2. Add the CSS class 'annotated' to the target container and specify the annotation text using the data-ann attribute. In addition, the DIV container must have a fixed height.

<div data-ann="Lorem ipsum dolor sit amet" 
     style="height:450px" 
     class="annotated">
</div>

3. Initialize the Annotations plugin.

$(".annotated").Annotations();

4. The default CSS styles for the annotation. Feel free to modify, override the CSS snippets as shown below to create your own styles.

.dev .annotated { background-color: rgba(255, 0, 0, 0.5); }

.dev .annotated *:not(.annotation) { background-color: transparent !important; }

.dev .annotated .annotation {
  padding: 5px;
  background-color: yellow;
  position: absolute;
  right: 0px;
  bottom: 0px;
}

.dev .annotated .annotation i {
  color: green;
  margin-right: 5px;
}

---

This awesome jQuery plugin is developed by cuadra. For more Advanced Usages, please check the demo page or visit the official website.