Add Margin Hover Text to Any Websites Easily with Marginotes

Inline tooltips are illusory though infrequently they only don’t fit good with certain content. Most websites leave space in a margins along a page physique and this is ideal for adding tooltip-style calm but a tooltips.

Enter Marginotes, a giveaway open source jQuery plugin that adds tradition records to a margins of your web page. You can toggle these records formed on links or certain elements on a page, such as images.

This plugin is surprisingly easy to set adult and it comes with a default stylesheet for your domain notes. These seem off to a side of your calm and they align right subsequent to a divide component on your web page.

The float records are added manually to your HTML elements, using a desc attribute. I’ve never seen this in HTML5 so we can’t contend if it’s entirely compliant. But, it does get picked adult by JavaScript that is all we unequivocally need.

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

Here’s a one line of jQuery indispensable to get this plugin working:


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

Inside a marginotes() function, we can supplement two discretionary parameters to change a domain note format:

  1. width – sets a note breadth (defaults to 100px)
  2. field – sets a HTML calm charge (defaults to "desc")

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

You can also check out this live demo if we wanna see it in action. This is really a singular plugin and it’s a good approach to add some additional content to your site.

Add Comment