Minimalist Side Note Plugin For jQuery - Marginotes

Marginotes is a small and easy-to-use jQuery side note plugin which displays a marginal note attaching to the left side of the container when hovering over a specified element.

How to use it:

1. Load both jQuery JavaScript library and the jQuery Marginotes plugin at the end of the document.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="marginotes.js"></script>

2. Add custom marginal notes to your text using desc attribute within the a or span tags.

<span desc="5400+ latest Free jQuery plugins with examples and tutorials for web &amp; mobile developers.">
  jQueryScript
</span>

<a href="https://www.jqueryscript.net" 
   desc="5400+ latest Free jQuery plugins with examples and tutorials for web &amp; mobile developers.">
  jQueryScript.Net
</a>

3. Just call the plugin on document ready and done.

$("a,span").marginotes()

4. The default CSS styles for the marginal note. You can override the following CSS snippets in the marginotes.js.

var tooltipStyle = {
    "position": "absolute",
    "border-right": "solid 2px #337ab7",
    "width": "50px",
    "font-size": "13px",
    "text-align": "right",
    "padding-right": "7px",
    "top": position.top,
    "left": position.left - width - 5,
    "min-height": parent.height(),
    "width": width
  }

5. Default plugin options.

$("a,span").marginotes({

  // width of the marginal note
  width: 100,

  // default attribute to hold the marginal note
  field: 'desc'
  
})

---

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