{"id":30246,"date":"2017-06-13T21:01:42","date_gmt":"2017-06-13T13:01:42","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=30246"},"modified":"2017-06-13T21:36:12","modified_gmt":"2017-06-13T13:36:12","slug":"margin-hover-text-marginotes","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/margin-hover-text-marginotes\/","title":{"rendered":"Add Margin Hover Text to Any Websites Easily with Marginotes"},"content":{"rendered":"

Inline tooltips<\/strong> are fantastic but sometimes they just don\u2019t 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<\/strong>.<\/p>\n

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

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

The hover notes are added manually<\/strong> to your HTML elements, using a desc<\/code> attribute<\/strong>. I\u2019ve never seen this in HTML5 so I can\u2019t say if it\u2019s fully compliant. But, it does get picked up by JavaScript which is all you really need.<\/p>\n

You can also change this attribute<\/strong> when you run the marginotes()<\/code> function, so you could change it to something like data-desc<\/code> if you\u2019re looking to be more compliant.<\/p>\n

Here\u2019s the one line of jQuery<\/strong> needed to get this plugin working:<\/p>\n

\r\n$(\"selector\").marginotes()\r\n<\/pre>\n
You should replace \"selector\"<\/code> with whatever elements you\u2019re targeting. So, if they\u2019re inside your page body you might use \".body span\"<\/code>. You could also target anchor links<\/strong> or by certain classes<\/strong> added to these elements.<\/p>\n
Inside the marginotes()<\/code> function, you can add two optional parameters<\/strong> to change the margin note format:<\/p>\n
    \n
  1. width<\/code> \u2013 sets the note width (defaults to 100px)<\/li>\n
  2. field<\/code> \u2013 sets the HTML content attribute (defaults to \"desc\"<\/code>)<\/li>\n<\/ol>\n
    Also, if you don\u2019t like using jQuery you can try the vanilla Marginotes<\/a> plugin<\/strong>. It runs on vanilla JS, so you have zero dependencies<\/strong> to get all the same features.<\/p>\n
    You can also check out this live demo<\/a><\/strong> if you wanna see it in action. This is definitely a unique plugin and it\u2019s a great way to add some extra content<\/strong> to your site.<\/p>\n
    Read Also:<\/strong> Add Simple Image Tooltip Labels with Taggd<\/a><\/p>","protected":false},"excerpt":{"rendered":"
    Inline tooltips are fantastic but sometimes they just don\u2019t 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.…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3393],"tags":[510],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nAdd Margin Hover Text to Any Websites Easily with Marginotes - Hongkiat<\/title>\n<meta name=\"description\" content=\"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\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/margin-hover-text-marginotes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add Margin Hover Text to Any Websites Easily with Marginotes\" \/>\n<meta property=\"og:description\" content=\"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\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/margin-hover-text-marginotes\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-13T13:01:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-06-13T13:36:12+00:00\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/margin-hover-text-marginotes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/margin-hover-text-marginotes\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Add Margin Hover Text to Any Websites Easily with Marginotes\",\"datePublished\":\"2017-06-13T13:01:42+00:00\",\"dateModified\":\"2017-06-13T13:36:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/margin-hover-text-marginotes\\\/\"},\"wordCount\":348,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"Web Designers\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/margin-hover-text-marginotes\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/margin-hover-text-marginotes\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/margin-hover-text-marginotes\\\/\",\"name\":\"Add Margin Hover Text to Any Websites Easily with Marginotes - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2017-06-13T13:01:42+00:00\",\"dateModified\":\"2017-06-13T13:36:12+00:00\",\"description\":\"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\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/margin-hover-text-marginotes\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/margin-hover-text-marginotes\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/margin-hover-text-marginotes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add Margin Hover Text to Any Websites Easily with Marginotes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Add Margin Hover Text to Any Websites Easily with Marginotes - Hongkiat","description":"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","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/margin-hover-text-marginotes\/","og_locale":"en_US","og_type":"article","og_title":"Add Margin Hover Text to Any Websites Easily with Marginotes","og_description":"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","og_url":"https:\/\/www.hongkiat.com\/blog\/margin-hover-text-marginotes\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-06-13T13:01:42+00:00","article_modified_time":"2017-06-13T13:36:12+00:00","author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/margin-hover-text-marginotes\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/margin-hover-text-marginotes\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Add Margin Hover Text to Any Websites Easily with Marginotes","datePublished":"2017-06-13T13:01:42+00:00","dateModified":"2017-06-13T13:36:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/margin-hover-text-marginotes\/"},"wordCount":348,"commentCount":2,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["Web Designers"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/margin-hover-text-marginotes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/margin-hover-text-marginotes\/","url":"https:\/\/www.hongkiat.com\/blog\/margin-hover-text-marginotes\/","name":"Add Margin Hover Text to Any Websites Easily with Marginotes - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2017-06-13T13:01:42+00:00","dateModified":"2017-06-13T13:36:12+00:00","description":"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","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/margin-hover-text-marginotes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/margin-hover-text-marginotes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/margin-hover-text-marginotes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Add Margin Hover Text to Any Websites Easily with Marginotes"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7RQ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=30246"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30246\/revisions"}],"predecessor-version":[{"id":30248,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30246\/revisions\/30248"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=30246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=30246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=30246"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=30246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}