Tiny jQuery Plugin For Annotating HTML Elements - Annotations

File Size: 10.5 KB
Views Total: 1732
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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" 

3. Initialize the Annotations plugin.


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.