{"id":38133,"date":"2017-09-27T21:01:36","date_gmt":"2017-09-27T13:01:36","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=38133"},"modified":"2017-11-24T19:12:40","modified_gmt":"2017-11-24T11:12:40","slug":"popperjs-javascript-tip-bubbles","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/popperjs-javascript-tip-bubbles\/","title":{"rendered":"Create On-Page Speech Bubbles with Popper.js"},"content":{"rendered":"

Everyone knows about tooltips<\/strong> and there are dozens of free resources<\/a> to help you make them. However, custom message bubbles<\/strong> or \u201cpoppers\u201d<\/strong> are also very useful.<\/p>\n

They aren\u2019t limited to hover events<\/strong>, so they can appear on the page consistently and work around other user behaviors.<\/p>\n

If you\u2019re looking to create these speech bubble poppers<\/strong> on your site then Popper.js<\/a><\/strong> is the best choice. It\u2019s a free open-source plugin, hosted on the official js.org<\/a> website.<\/p>\n

You\u2019ll find these bubble tips in a lot of websites that have complex interfaces. Sometimes they\u2019ll offer quick tips<\/strong>, walkthroughs<\/strong>, and onboarding advice<\/strong> for people new to the interface.<\/p>\n

Read Also:<\/strong> Creating Animated Tooltip Easily with Hint.css<\/a><\/p>\n

With Popper.js, you don\u2019t need to wait for the user to hover just to create a tooltip. Instead, you can force a popper to appear anywhere<\/strong>, any size<\/strong>, any color<\/strong>, with dynamic positioning<\/strong>.<\/p>\n

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

Check out the Popper.js demo page<\/a> to see what I mean. It comes with a wide array of positioning features<\/strong> that let you auto-flip the popper position based on the screen location.<\/p>\n

As the user scrolls down the page, they might lose the popper bubble. With this plugin, you can force it back into view<\/strong> by flipping it up (or down), depending on the user\u2019s scroll direction.<\/p>\n

You have full control over the boundaries, the arrow positions, the tooltip colors, and so much more. Not to mention this plugin is gorgeous and fully extensible<\/strong> if you want to add your own features into the mix.<\/p>\n

All of the source code is available for free on GitHub<\/a> if you wanna check it out.<\/p>\n

To get started, take a look at the documentation page<\/a><\/strong> for a full guide. This tells you which scripts you\u2019ll need, how to set up a custom popper, and how to configure the different viewport options. Although, the best resource is the main Popper.js page<\/a><\/strong>, with demos galore and plenty of code samples.<\/p>\n

If you want to read more about development check out this blog post<\/a> written by the creator Federico Zivolo.<\/p>\n

Read Also:<\/strong> Add Simple Image Tooltip Labels with Taggd<\/a><\/p>","protected":false},"excerpt":{"rendered":"

Everyone knows about tooltips and there are dozens of free resources to help you make them. However, custom message bubbles or \u201cpoppers\u201d are also very useful. They aren\u2019t limited to hover events, so they can appear on the page consistently and work around other user behaviors. If you\u2019re looking to create these speech bubble poppers…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[3497],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nCreate On-Page Speech Bubbles with Popper.js - Hongkiat<\/title>\n<meta name=\"description\" content=\"Everyone knows about tooltips and there are dozens of free resources to help you make them. However, custom message bubbles or "poppers" are also very\" \/>\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\/popperjs-javascript-tip-bubbles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create On-Page Speech Bubbles with Popper.js\" \/>\n<meta property=\"og:description\" content=\"Everyone knows about tooltips and there are dozens of free resources to help you make them. However, custom message bubbles or "poppers" are also very\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/popperjs-javascript-tip-bubbles\/\" \/>\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-09-27T13:01:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-24T11:12:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/popperjs-javascript-tip-bubbles\/01-popperjs-preview-homepage.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\\\/popperjs-javascript-tip-bubbles\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/popperjs-javascript-tip-bubbles\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Create On-Page Speech Bubbles with Popper.js\",\"datePublished\":\"2017-09-27T13:01:36+00:00\",\"dateModified\":\"2017-11-24T11:12:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/popperjs-javascript-tip-bubbles\\\/\"},\"wordCount\":361,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/popperjs-javascript-tip-bubbles\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/popperjs-javascript-tip-bubbles\\\/01-popperjs-preview-homepage.jpg\",\"keywords\":[\"Javascript Library\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/popperjs-javascript-tip-bubbles\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/popperjs-javascript-tip-bubbles\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/popperjs-javascript-tip-bubbles\\\/\",\"name\":\"Create On-Page Speech Bubbles with Popper.js - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/popperjs-javascript-tip-bubbles\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/popperjs-javascript-tip-bubbles\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/popperjs-javascript-tip-bubbles\\\/01-popperjs-preview-homepage.jpg\",\"datePublished\":\"2017-09-27T13:01:36+00:00\",\"dateModified\":\"2017-11-24T11:12:40+00:00\",\"description\":\"Everyone knows about tooltips and there are dozens of free resources to help you make them. However, custom message bubbles or \\\"poppers\\\" are also very\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/popperjs-javascript-tip-bubbles\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/popperjs-javascript-tip-bubbles\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/popperjs-javascript-tip-bubbles\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/popperjs-javascript-tip-bubbles\\\/01-popperjs-preview-homepage.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/popperjs-javascript-tip-bubbles\\\/01-popperjs-preview-homepage.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/popperjs-javascript-tip-bubbles\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create On-Page Speech Bubbles with Popper.js\"}]},{\"@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":"Create On-Page Speech Bubbles with Popper.js - Hongkiat","description":"Everyone knows about tooltips and there are dozens of free resources to help you make them. However, custom message bubbles or \"poppers\" are also very","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\/popperjs-javascript-tip-bubbles\/","og_locale":"en_US","og_type":"article","og_title":"Create On-Page Speech Bubbles with Popper.js","og_description":"Everyone knows about tooltips and there are dozens of free resources to help you make them. However, custom message bubbles or \"poppers\" are also very","og_url":"https:\/\/www.hongkiat.com\/blog\/popperjs-javascript-tip-bubbles\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-09-27T13:01:36+00:00","article_modified_time":"2017-11-24T11:12:40+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/popperjs-javascript-tip-bubbles\/01-popperjs-preview-homepage.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\/popperjs-javascript-tip-bubbles\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/popperjs-javascript-tip-bubbles\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Create On-Page Speech Bubbles with Popper.js","datePublished":"2017-09-27T13:01:36+00:00","dateModified":"2017-11-24T11:12:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/popperjs-javascript-tip-bubbles\/"},"wordCount":361,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/popperjs-javascript-tip-bubbles\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/popperjs-javascript-tip-bubbles\/01-popperjs-preview-homepage.jpg","keywords":["Javascript Library"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/popperjs-javascript-tip-bubbles\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/popperjs-javascript-tip-bubbles\/","url":"https:\/\/www.hongkiat.com\/blog\/popperjs-javascript-tip-bubbles\/","name":"Create On-Page Speech Bubbles with Popper.js - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/popperjs-javascript-tip-bubbles\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/popperjs-javascript-tip-bubbles\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/popperjs-javascript-tip-bubbles\/01-popperjs-preview-homepage.jpg","datePublished":"2017-09-27T13:01:36+00:00","dateModified":"2017-11-24T11:12:40+00:00","description":"Everyone knows about tooltips and there are dozens of free resources to help you make them. However, custom message bubbles or \"poppers\" are also very","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/popperjs-javascript-tip-bubbles\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/popperjs-javascript-tip-bubbles\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/popperjs-javascript-tip-bubbles\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/popperjs-javascript-tip-bubbles\/01-popperjs-preview-homepage.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/popperjs-javascript-tip-bubbles\/01-popperjs-preview-homepage.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/popperjs-javascript-tip-bubbles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create On-Page Speech Bubbles with Popper.js"}]},{"@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-9V3","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38133","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=38133"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38133\/revisions"}],"predecessor-version":[{"id":41961,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38133\/revisions\/41961"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=38133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=38133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=38133"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=38133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}