{"id":45147,"date":"2018-08-08T21:01:50","date_gmt":"2018-08-08T13:01:50","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=45147"},"modified":"2018-08-08T20:16:27","modified_gmt":"2018-08-08T12:16:27","slug":"tippyjs-tooltips-plugin","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/tippyjs-tooltips-plugin\/","title":{"rendered":"Tippy.js – Lightweight Vanilla Javascript Tooltip Library"},"content":{"rendered":"

Tooltips are useful for showing little bits of extra content. They save space on the page and give you a room to animate something that grabs people\u2019s attention.<\/p>\n

In the past, we\u2019ve covered tooltip scripts<\/a> but many developers want custom libraries. Some prefer jQuery, others want simple vanilla JS.<\/p>\n

The Tippy plugin<\/a> works best for the latter group who want to work with vanilla JS code<\/strong>.<\/p>\n

Read Also:<\/strong> Rellax.js \u2014 Free Parallax Features Using Vanilla JavaScript<\/a><\/p>\n

\"tippy.js<\/a><\/figure>\n

With Tippy.js you get a fully-functioning tooltip library<\/strong> running on top of Popper.js<\/a>. This means the plugin does come with a small dependency, but it\u2019s a lot easier to manage than the jQuery library.<\/p>\n

So what\u2019s the beauty of Tippy? It adds onto the default Popper styles to create more dynamic tooltips<\/strong> with incredible effects.<\/p>\n

You can add fades, slides, wiggles, custom durations, callback methods, and even dynamic effects like auto-rotating tooltips.<\/p>\n

Really this plugin will take your tooltips up to a whole new level with well-defined usability features. You can keep tooltips fixed to the screen with certain page elements<\/strong>, or have them change orientation if the screen gets too small.<\/p>\n

It also supports touch devices which makes this perfect for responsive layouts<\/a>. The tooltip HTML is labeled using ARIA standards<\/a> for maximum accessibility. I can\u2019t think of anything bad to say about this plugin!<\/p>\n

\"tippyjs<\/a><\/figure>\n

If you wanna try this in your own site just download a copy of the source code from GitHub<\/a>. This includes the main plugin files along with details on how to install it using npm.<\/p>\n

The default Tippy.js script file comes with Popper.js included so you don\u2019t even need to download that extra library. All you need is the default JS\/CSS file and a webpage to run tooltips.<\/p>\n

If you wanna dig further into some examples take a look at the Tippy.js homepage<\/a> which includes live samples + code snippets you can copy and reuse.<\/p>","protected":false},"excerpt":{"rendered":"

Tooltips are useful for showing little bits of extra content. They save space on the page and give you a room to animate something that grabs people\u2019s attention. In the past, we\u2019ve covered tooltip scripts but many developers want custom libraries. Some prefer jQuery, others want simple vanilla JS. The Tippy plugin works best for…<\/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":[1057],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nTippy.js - Lightweight Vanilla Javascript Tooltip Library - Hongkiat<\/title>\n<meta name=\"description\" content=\"Tooltips are useful for showing little bits of extra content. They save space on the page and give you a room to animate something that grabs people's\" \/>\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\/tippyjs-tooltips-plugin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tippy.js - Lightweight Vanilla Javascript Tooltip Library\" \/>\n<meta property=\"og:description\" content=\"Tooltips are useful for showing little bits of extra content. They save space on the page and give you a room to animate something that grabs people's\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/tippyjs-tooltips-plugin\/\" \/>\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=\"2018-08-08T13:01:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/tippyjs-tooltips-plugin\/01-tippyjs-plugin.jpg\" \/>\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\\\/tippyjs-tooltips-plugin\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tippyjs-tooltips-plugin\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Tippy.js – Lightweight Vanilla Javascript Tooltip Library\",\"datePublished\":\"2018-08-08T13:01:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tippyjs-tooltips-plugin\\\/\"},\"wordCount\":337,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tippyjs-tooltips-plugin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tippyjs-tooltips-plugin\\\/01-tippyjs-plugin.jpg\",\"keywords\":[\"tooltips\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tippyjs-tooltips-plugin\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tippyjs-tooltips-plugin\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tippyjs-tooltips-plugin\\\/\",\"name\":\"Tippy.js - Lightweight Vanilla Javascript Tooltip Library - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tippyjs-tooltips-plugin\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tippyjs-tooltips-plugin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tippyjs-tooltips-plugin\\\/01-tippyjs-plugin.jpg\",\"datePublished\":\"2018-08-08T13:01:50+00:00\",\"description\":\"Tooltips are useful for showing little bits of extra content. They save space on the page and give you a room to animate something that grabs people's\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tippyjs-tooltips-plugin\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tippyjs-tooltips-plugin\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tippyjs-tooltips-plugin\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tippyjs-tooltips-plugin\\\/01-tippyjs-plugin.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tippyjs-tooltips-plugin\\\/01-tippyjs-plugin.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tippyjs-tooltips-plugin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tippy.js – Lightweight Vanilla Javascript Tooltip Library\"}]},{\"@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":"Tippy.js - Lightweight Vanilla Javascript Tooltip Library - Hongkiat","description":"Tooltips are useful for showing little bits of extra content. They save space on the page and give you a room to animate something that grabs people's","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\/tippyjs-tooltips-plugin\/","og_locale":"en_US","og_type":"article","og_title":"Tippy.js - Lightweight Vanilla Javascript Tooltip Library","og_description":"Tooltips are useful for showing little bits of extra content. They save space on the page and give you a room to animate something that grabs people's","og_url":"https:\/\/www.hongkiat.com\/blog\/tippyjs-tooltips-plugin\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-08-08T13:01:50+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/tippyjs-tooltips-plugin\/01-tippyjs-plugin.jpg","type":"","width":"","height":""}],"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\/tippyjs-tooltips-plugin\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/tippyjs-tooltips-plugin\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Tippy.js – Lightweight Vanilla Javascript Tooltip Library","datePublished":"2018-08-08T13:01:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/tippyjs-tooltips-plugin\/"},"wordCount":337,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/tippyjs-tooltips-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/tippyjs-tooltips-plugin\/01-tippyjs-plugin.jpg","keywords":["tooltips"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/tippyjs-tooltips-plugin\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/tippyjs-tooltips-plugin\/","url":"https:\/\/www.hongkiat.com\/blog\/tippyjs-tooltips-plugin\/","name":"Tippy.js - Lightweight Vanilla Javascript Tooltip Library - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/tippyjs-tooltips-plugin\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/tippyjs-tooltips-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/tippyjs-tooltips-plugin\/01-tippyjs-plugin.jpg","datePublished":"2018-08-08T13:01:50+00:00","description":"Tooltips are useful for showing little bits of extra content. They save space on the page and give you a room to animate something that grabs people's","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/tippyjs-tooltips-plugin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/tippyjs-tooltips-plugin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/tippyjs-tooltips-plugin\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/tippyjs-tooltips-plugin\/01-tippyjs-plugin.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/tippyjs-tooltips-plugin\/01-tippyjs-plugin.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/tippyjs-tooltips-plugin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tippy.js – Lightweight Vanilla Javascript Tooltip Library"}]},{"@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_shortlink":"https:\/\/wp.me\/p4uxU-bKb","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/","_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/45147","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=45147"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/45147\/revisions"}],"predecessor-version":[{"id":45148,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/45147\/revisions\/45148"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=45147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=45147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=45147"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=45147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}