Create labeled Overlays On DOM Elements - jQuery Purplecoat.js

Purplecoat.js is a lightweight (~1kb minified) jQuery plugin for creating an animated labeled overlay on any DOM element, which can be triggered by click or hover. It works with jQuery's fade() function to provide a smooth experience.

How to use it:

1. Get started by loading the minified version of the jQuery Purplecoat.js plugin in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/purplecoat.min.js"></script>

2. Add a unique ID to the target DOM element and define the overlay text in the data-purplecoat-label attribute:

<img data-purplecoat="example"
     data-purplecoat-label="jQueryScript"
     src="https://www.jqueryscript.net/dummy/1.jpg" />

3. Create a trigger element to toggle the labeled overlay.

<button data-purplecoat-toggle="example">
  Click Me
</button>

4. That's it. You can also trigger the labeled overlay via JavaScript as follows:

$("[data-purplecoat=example]").on("mouseover", function() {
  $("[data-purplecoat=example]").purplecoat();
});

5. Override the default CSS styles of the overlay:

.purplecoat { 
  display: none; 
  position: absolute; 
  padding: 5px; 
  box-sizing: border-box; 
  background-color: rgba(142, 68, 173, 0.9); 
  color: #FFF; 
  text-align: center; 
  font-weight: bold; 
  overflow: hidden; 
  z-index: 9999; 
} 

.purplecoat-inner { 
  display: table; 
  width: 100%; 
  height: 100%; 
} 

.purplecoat-inner-text { 
  display: table-cell; 
  vertical-align: middle;
}

---

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