Add Margin Hover Text to Any Websites Easily with Marginotes

By Jake Rocheleau. in Toolkit. Updated on June 13, 2017.

Inline tooltips are fantastic but sometimes they just don’t fit well with certain content. Most websites leave space in the margins along the page body and this is perfect for adding tooltip-style content without the tooltips.

Enter Marginotes, a free open source jQuery plugin that adds custom notes to the margins of your web page. You can toggle these notes based on links or certain elements on the page, such as images.

This plugin is surprisingly easy to set up and it comes with a default stylesheet for your margin notes. These appear off to the side of your content and they align right next to the paragraph element on your web page.

The hover notes are added manually to your HTML elements, using a desc attribute. I’ve never seen this in HTML5 so I can’t say if it’s fully compliant. But, it does get picked up by JavaScript which is all you really need.

You can also change this attribute when you run the marginotes() function, so you could change it to something like data-desc if you’re looking to be more compliant.

Here’s the one line of jQuery needed to get this plugin working:

$("selector").marginotes()

You should replace "selector" with whatever elements you’re targeting. So, if they’re inside your page body you might use ".body span". You could also target anchor links or by certain classes added to these elements.

Inside the marginotes() function, you can add two optional parameters to change the margin note format:

width – sets the note width (defaults to 100px)
field – sets the HTML content attribute (defaults to "desc")

Also, if you don’t like using jQuery you can try the vanilla Marginotes plugin. It runs on vanilla JS, so you have zero dependencies to get all the same features.

You can also check out this live demo if you wanna see it in action. This is definitely a unique plugin and it’s a great way to add some extra content to your site.