{"id":8225,"date":"2021-11-26T13:26:31","date_gmt":"2021-11-26T13:26:31","guid":{"rendered":"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/"},"modified":"2025-05-10T18:34:15","modified_gmt":"2025-05-10T18:34:15","slug":"how-to-create-tooltips","status":"publish","type":"post","link":"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/","title":{"rendered":"How To Create A Tooltip With HTML, CSS or No Code [EASY]"},"content":{"rendered":"\r\n<p>If you\u2019re a <a href=\"https:\/\/userpilot.com\/role\/product-management\">product manager<\/a> or marketer who wants to highlight a particular feature of your product, you\u2019ve probably thought about using tooltips.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n<p>Here\u2019s the problem: it\u2019s not always easy to create a tooltip without using code!<\/p>\r\n\r\n\r\n\r\n<p>This means that creating tooltips often ends up being a frustrating experience, or a drain on scarce developer resources.<\/p>\r\n\r\n\r\n\r\n<p>Fortunately, there are ways to create tooltips without requiring coding knowledge. Let\u2019s dive in!<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"e5dn7\"><strong>What are tooltips?<\/strong><\/h2>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/tooltip-example_d02ad14baa4d4012a406d81d4d23e1b8_800.jpeg\" alt=\"Tooltip\" \/>\r\n<figcaption><strong>Source: jqueryscript<\/strong><\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>A tooltip is a short description that is linked to an element of your product. The purpose of tooltips is to explain to users what particular features of your UI do, especially when those features are unfamiliar or not immediately intuitive.<\/p>\r\n\r\n\r\n\r\n<p>On desktop, tooltips normally appear when the user hovers the mouse over the element in question. On mobile, tooltips generally appear when the user taps and holds the element.<\/p>\r\n\r\n\r\n\r\n<p>In both cases, the tooltip will disappear once the user moves their mouse or finger away, or after a few seconds have passed.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"7bthu\"><strong>What are native tooltips?<\/strong><\/h2>\r\n\r\n\r\n\r\n<p><a href=\"https:\/\/userpilot.com\/\">Userpilot<\/a> offers two ways to create tooltips: either as part of an <strong>experience flow<\/strong> or as a <strong>standalone tooltip<\/strong>.<\/p>\r\n\r\n\r\n\r\n<p>Here\u2019s a screenshot from our app that shows you both options:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/how-to-create-tooltips-saas_f6d31aa365b4778e3d662a83870a9d9f_800.jpg\" alt=\"Tooltip options\" \/>\r\n<figcaption>Source: Userpilot<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>We call the standalone tooltip a \u201cnative tooltip\u201d &#8211; because it becomes a part of your native UI.<\/p>\r\n\r\n\r\n\r\n<p>Because they don\u2019t require the user to go through a complex experience flow before displaying, native tooltips are best used to show the customer elements that are fairly straightforward.<\/p>\r\n\r\n\r\n\r\n<p>Here are some examples of where native tooltips might be useful:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>If you want to provide more subtle help that displays based on a feature that the user decides to scroll over.<\/li>\r\n<li>If you want to highlight and explain a less obvious element of your UI:<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/d37oebn0w9ir6a.cloudfront.net\/account_6827\/native-tooltips_giphy_406ac7337657f388ffd2cd8fd0465a02.gif\" alt=\"native tooltip gif\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li><a href=\"https:\/\/userpilot.com\/blog\/knowledge-base\/\">A hint that is intended to display permanently<\/a>.<\/li>\r\n<li>A commonly used hotspot.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>For more complex use cases, Userpilot also allows you to build tooltips into longer experience flows. Here\u2019s what that looks like in our app:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/how-to-tooltips_bf743dc56f55a7d8f9fc22157c34d109_800.jpg\" alt=\"Creating tooltips in Userpilot\" \/>\r\n<figcaption>Source: Userpilot<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Building tooltips into longer experience flows could be useful in the following scenarios:<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>A welcome flow that highlights the features the customer needs to learn in order to <a href=\"https:\/\/userpilot.com\/blog\/product-activation-rate-optimization\/\">activate<\/a>.<\/li>\r\n<li>An announcement of a new feature, page, or view.<\/li>\r\n<li>Nudging the user towards certain features in a manner conditional upon their past in-app behavior.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"9dvc4\"><strong>What are tooltips used for in SaaS products?<\/strong><\/h2>\r\n\r\n\r\n\r\n<p>Whether you build them as a standalone element or as part of a larger experience flow, tooltips have a number of applications at every stage of the user journey.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"ufgd\">1. Activation<\/h3>\r\n\r\n\r\n\r\n<p>At the start of the user journey, when the customer is learning the product, tooltips are a great way to point the user to the features they need to experience in order to activate.<\/p>\r\n\r\n\r\n\r\n<p>Here\u2019s a concrete example.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/tooltips-for-activation_b2f870ee80e3f691b6de871a54897e13_800.jpg\" alt=\"Postfity tooltip\" \/>\r\n<figcaption>Source: Postfity<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Postfity is a social media scheduling tool. To activate, users first need to connect their social media accounts to the tool. Postfity encourages users to connect their accounts during onboarding using a tooltip.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"7rv6n\">2. Upsells<\/h3>\r\n\r\n\r\n\r\n<p>SaaS businesses generally make most of their revenue from <a href=\"https:\/\/userpilot.com\/blog\/customer-retention-strategies\/\">retaining customers for a long time <\/a>and upselling them. This is the so-called \u2018<a href=\"https:\/\/userpilot.com\/solutions\/account-expansion\">expansion revenue<\/a>\u2019.<\/p>\r\n\r\n\r\n\r\n<p>So a tooltip could be a helpful way to showcase an upsell to an existing customer.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/tooltips-for-upselling_ee7a53159397dc371487a58536eba67d_800.jpg\" alt=\"Upsell Chameleon\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>In this example, the tooltip urges users to <a href=\"https:\/\/userpilot.com\/blog\/saas-signup-flow\/\">sign up<\/a> for an onboarding call to discuss multichannel prospecting ads, which is an upsell. The blue tooltip only appears when the user mouses over the white lightbox.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"72he9\">3. Feature adoption<\/h3>\r\n\r\n\r\n\r\n<p>Further along the line, you could consider using tooltips to introduce users to new features as they are released. You might think of this as <a href=\"https:\/\/userpilot.com\/blog\/secondary-onboarding\/\">secondary<\/a> or \u201cevergreen\u201d onboarding.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Facebook-secondary-feature-tooltip_c88bf0e4f052602bf898fc24d25701c2_800.jpeg\" alt=\"FB tooltip\" \/>\r\n<figcaption>Source: Appcues<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>When the like button on Facebook came out, only one reaction was possible: the \u2018like\u2019. After Facebook released the ability to react to posts in multiple different ways, they used the tooltip above to highlight this new feature to their users.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"6hhks\"><strong>How to create a tooltip without coding knowledge<\/strong><\/h2>\r\n\r\n\r\n\r\n<p>Now that you know why tooltips are useful, here\u2019s how you can use Userpilot to easily build them. Want to see this live? <a href=\"https:\/\/userpilot.com\/userpilot-demo\">Book a free demo today!<\/a><\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"e7m9u\">1. Building a native tooltip<\/h3>\r\n\r\n\r\n\r\n<p>First, open up Userpilot and go to the \u2018Native Tooltips\u2019 section in the Engage part of the app.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/making-tooltips-userpilot_3bd099aaa0c38cdefaa9c14594cde77f_800.jpg\" alt=\"Userpilot native tooltip\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Click on \u2018Create New Native Tooltip\u2019, and enter the URL of the page you want to build on.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Screenshot2021-03-24at14_52_41_cab1eb65fe4f1778eca2b6140709c50b_800.jpg\" alt=\"Native tooltip lightbox\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>You\u2019ll be taken to the page you just entered. In this example, we\u2019ve chosen to build the tooltip in Campfire, Userpilot\u2019s demo app.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/userpilot-demo-app-campfire_768e0047cab83e56b00ec9c7d3718933_800.jpg\" alt=\"Userpilot demo app Campfire\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Click on the button that says \u2018Create New Content\u2019, then click \u2018Create\u2019. The following screen should pop up:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/tooltips-without-coding_d09e0714323f4c6e5fffe6d1a39fae88_800.jpg\" alt=\"Userpilot tooltip options\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Click \u2018Create a New Native Tooltip\u2019. Userpilot will then take you back to the page you said you wanted to build the tooltip on. You\u2019ll next be asked to select the element you want to put the tooltip on.<\/p>\r\n\r\n\r\n\r\n<p>Once you\u2019ve selected your chosen element, the following screen will pop up:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/userpilot-tooltip-creation_4219c80d0ccb92085d616ce63a583ea1_800.jpg\" alt=\"Customize tooltips in Userpilot\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Just click \u2018Create\u2019 for now &#8211; it will be easier to customize your tooltip once you can see where it is. And voila: here\u2019s the tooltip we just built!<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Native-tooltips-userpilot_66ec6f368855e6333d5b6aa4b6e506d6_800.jpg\" alt=\"Tooltip after moving\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Right now, the tooltip is obstructing the rest of the UI and making it impossible to read. That\u2019s easy to solve &#8211; simply play with the \u2018Placement\u2019 and \u2018Place Element\u2019 features on the right-hand side until you find something that looks good.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Screenshot2021-03-24at15_06_52_3e81d4d4350f04e9eca7b10f5e8fdb29_800.jpg\" alt=\"Tooltip moved\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>There, much better. But the text that\u2019s showing is still placeholder text &#8211; how can you change that?<\/p>\r\n\r\n\r\n\r\n<p>Simply mouse over the tooltip and you\u2019ll see an orange edit button.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Screenshot2021-03-24at15_09_30_4faa2e794a50eff5f8316c0b6664f43b_800.jpg\" alt=\"Edit tooltip text\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Click it and you\u2019ll be able to input your desired text. Make it short and snappy!<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Screenshot2021-03-24at15_11_15_0dc85d2b748014f4a4b42d74f1a17228_800.jpg\" alt=\"Tooltip text edited\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Hit the green checkmark to save your work.<\/p>\r\n\r\n\r\n\r\n<p>Then, use the \u2018Preview\u2019 and \u2018Publish\u2019 buttons at the bottom-right to review and to release your new tooltip.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Screenshot2021-03-24at15_12_09_c3605cc5c4f8a5259e0c391f0b9ae0fc_800.jpg\" alt=\"save tooltip\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\" id=\"8qb7v\">2. Create a tooltip as part of a flow<\/h3>\r\n\r\n\r\n\r\n<p>Ready to level up?<\/p>\r\n\r\n\r\n\r\n<p>Start by going to the \u2018Experiences\u2019 section in the Engage part of Userpilot.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Screenshot2021-03-24at15_19_20_45d3b72b40308b4d0c6e7df3e34919c5_800.jpg\" alt=\"Tooltip experience flow\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>As per the previous example, click \u2018Create New Experience\u2019, and enter the page you want to start the Experience on.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Screenshot2021-03-24at15_22_50_02d500ef4d01c8bd98f9fe4adb97c0e0_800.jpg\" alt=\"Campfire\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>The page we\u2019re going to choose is the home page of the fictional Campfire app.<\/p>\r\n\r\n\r\n\r\n<p>Campfire is a project management app, so a really important step to <a href=\"https:\/\/userpilot.com\/blog\/in-app-guidance-saas\/\">get users to activate <\/a>is to make them set up their first project. Let\u2019s create an experience flow that accomplishes this goal and involves a tooltip.<\/p>\r\n\r\n\r\n\r\n<p><strong>First step<\/strong>: we want to create a welcome screen. Click \u2018Create New Content\u2019, then \u2018Create New Experience\u2019. After choosing a color scheme, you\u2019ll reach this screen:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Screenshot2021-03-24at15_26_07_5afa67de21b4396e82e5387ad9eb69f5_800.jpg\" alt=\"Add tooltip Campfire\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Click \u2018Add Step\u2019, and select \u2018Modal\u2019 from the options.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Screenshot2021-03-24at15_27_50_9d95a9f6841f85c5e3da76fa41b8ca19_800.jpg\" alt=\"Userpilot modal\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Choose from one of the available welcome screen templates:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Creating-modals-userpilot_a5876f8f0d767abe0591dfb5d5b246f4_800.jpg\" alt=\"Userpilot template for Modals\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>And customize your welcome screen until it looks the way you want it to.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/creating-welcome-screen-userpilot_38bcebbd871b21966147d93d573ab474_800.jpg\" alt=\"Userpilot - welcome screen\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Note: if you hover over the CTA button (in this case \u201cLet\u2019s Go\u201d) and use the orange edit feature, you will notice the link points to the \u201cNext Step\u201d in the experience by default. If you\u2019d like to change it to e.g. take the user to a specific URL &#8211; either within your app or elsewhere &#8211; simply change the destination linked to the button.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Screenshot2021-03-24at15_32_58_480a73f2e16ae7bfd80bedfc284e7533_800.jpg\" alt=\"Userpilot button CTA\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Click on the green checkmark to save your changes, and then it\u2019s time to make the next part of the flow.<\/p>\r\n\r\n\r\n\r\n<p>For the sake of this example, we\u2019re going to take the user to the Scrum Board part of Campfire and push them to create a new project.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Screenshot2021-03-24at15_36_46_e88d91a30ad404cbca539a4aeb20c453_800.jpg\" alt=\"Campfire scrum board\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Click \u2018Add Step\u2019, and click on \u2018Page Change\u2019:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Screenshot2021-03-24at15_41_36_4ea38deebc1189b47e46cc0ea0de5d10_800.jpg\" alt=\"Userpilot page change\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Once we\u2019ve input the Scrum Board page, the software knows to take the user to that page after they\u2019ve finished the welcome screen.<\/p>\r\n\r\n\r\n\r\n<p>Now it\u2019s time to create our tooltip!<\/p>\r\n\r\n\r\n\r\n<p>Click \u2018Add Step\u2019 again, and this time clicks on \u2018Tooltip\u2019.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/how-to-create-tooltips_41d58a1cebc9f226319d677156c1ab3e_800.jpg\" alt=\"\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Click on your UI at the area where you want your tooltip to appear. You\u2019ll then be encouraged to select a tooltip from a pre-existing template:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Screenshot2021-03-24at15_46_14_37a3ebfd3c866900291a7f36a6fd9d84_800.jpg\" alt=\"Userpilot tooltip template\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>This is what the Standard tooltip looks like in our example:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Screenshot2021-03-24at15_47_02_35eeb7b400178ec5668d1749aa12a67c_800.jpg\" alt=\"Userpilot Standard tooltip template\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>As with the native tooltip example, the tooltip is in the way of the rest of the UI, so let\u2019s use the Placement and Place Element features to fix that.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Screenshot2021-03-24at15_48_34_14e84e0fc2921430aa031fe0ce89a739_800.jpg\" alt=\"Modified tooltip\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Better. And now let\u2019s edit the text by hovering over it so that the tooltip provides a useful hint for our user.<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Screenshot2021-03-24at15_49_45_810486c5edac7450538164618b765d43_800.jpg\" alt=\"Edited tooltip\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>And there we have it! That\u2019s how easy it is to create a welcome flow that involves a tooltip.<\/p>\r\n\r\n\r\n\r\n<p>All this is possible in Userpilot without any coding. If you want to see these steps in action <a href=\"https:\/\/userpilot.com\/userpilot-demo\">book a free demo today<\/a>, or if you\u2019d like to give it a spin yourself, <a href=\"https:\/\/run.userpilot.io\/signup\/8FdttWZdETscaAGkE88Y\">sign up for a free trial<\/a>!<\/p>\r\n\r\n\r\n\r\n<p>If you\u2019re feeling intrepid and want to build a tooltip using code, read on&#8230;<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"3pavg\"><strong>How to create a tooltip in HTML<\/strong><\/h2>\r\n\r\n\r\n\r\n<p>We warned you: it\u2019s not easy unless you\u2019re technically minded!<\/p>\r\n\r\n\r\n\r\n<p>Here\u2019s an example of an HTML tooltip from our friends over at Educba:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/HTML-tooltip_e854e8c947e3ab9b8acd6f40743aabbc_800.jpg\" alt=\"HTML tooltip bad\" \/>\r\n<figcaption>Source: Educba<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>No disrespect, but we think this looks a bit like a website from the 90s. Now let\u2019s have a look at how much code was needed to create this fairly average result:<\/p>\r\n\r\n\r\n\r\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\r\n<p><code>&lt;html&gt;<\/code><br \/><code>&lt;head&gt;<\/code><br \/><code>&lt;title&gt;HTML tooltip&lt;\/title&gt;<\/code><br \/><code>&lt;\/head&gt;<\/code><br \/><code>&lt;style&gt;<\/code><br \/><code>.arrowpopup {<\/code><br \/><code>position: relative;<\/code><br \/><code>display: inline-block;<\/code><br \/><code>cursor: pointer;<\/code><br \/><code>}<\/code><br \/><code>.arrowpopup .tooltiptext {<\/code><br \/><code>visibility: hidden;<\/code><br \/><code>width: 160px;<\/code><br \/><code>background-color: #856;<\/code><br \/><code>color: white;<\/code><br \/><code>text-align: center;<\/code><br \/><code>border-radius: 4px;<\/code><br \/><code>padding: 9px ;<\/code><br \/><code>position: absolute;<\/code><br \/><code>bottom: 150%;<\/code><br \/><code>left: 50%;<\/code><br \/><code>margin-left: -85px;<\/code><br \/><code>}<\/code><br \/><code>.arrowpopup .tooltiptext::after {<\/code><br \/><code>content: \"\";<\/code><br \/><code>position: absolute;<\/code><br \/><code>top: 100%;<\/code><br \/><code>left: 50%;<\/code><br \/><code>margin-left: -5px;<\/code><br \/><code>border-width: 5px;<\/code><br \/><code>border-style: solid;<\/code><br \/><code>border-color: #856 transparent transparent transparent;<\/code><br \/><code>}<\/code><br \/><code>.arrowpopup .show {<\/code><br \/><code>visibility: visible;<\/code><br \/><code>}<\/code><br \/><code>&lt;\/style&gt;<\/code><br \/><code>&lt;body style=\"padding:100px;\"&gt;<\/code><br \/><code>&lt;div class=\"arrowpopup\" onclick=\"myFunction()\"&gt;Tooltip Demo Click here!<\/code><br \/><code>&lt;span class=\"tooltiptext\" id=\"tooltipdemo\"&gt;HTML Tooltip helps you to display extra information of element.&lt;\/span&gt;<\/code><br \/><code>&lt;\/div&gt;<\/code><br \/><code>&lt;script&gt;<\/code><br \/><code>function myFunction() {<\/code><br \/><code>var tt = document.getElementById(\"tooltipdemo\");<\/code><br \/><code>tt.classList.toggle(\"show\");<\/code><br \/><code>}<\/code><br \/><code>&lt;\/script&gt;<\/code><br \/><code>&lt;\/body&gt;<\/code><br \/><code>&lt;\/html&gt;<\/code><\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n<p>That\u2019s a lot of effort for an okay-looking result.<\/p>\r\n\r\n\r\n\r\n<p><strong>Here are some of the problems with this approach:<\/strong><\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Unlike with Userpilot, there\u2019s no template provided. You have to make everything up from scratch! If you want to find templates, you have to do so on your own initiative.<\/li>\r\n<li>Every single tiny aspect of how this tooltip looks has to be specified manually. If you look through the code, there\u2019s padding, positioning, margins, colors, visibility, width, height&#8230;. the list goes on.<\/li>\r\n<li>There is effectively double the work, as you have to code not only the tooltip text but what happens when you mouse over it.<\/li>\r\n<li>&#8230;and you have to rinse &amp; repeat every time you want to add a new tooltip somewhere! Imagine if the color, font, or style is different for every new tooltip!<\/li>\r\n<li>If you get even one element of your code wrong (and there are lots of elements), your users will be unforgiving.<\/li>\r\n<li>Think about all the developer time that would be needed to build something like this. That doesn\u2019t compare very favorably to a tool like Userpilot, where non-technical product managers can produce something professional in about 10 minutes.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"82ais\"><strong>How to create a tooltip in CSS<\/strong><\/h2>\r\n\r\n\r\n\r\n<p>The visual output from CSS tooltips is a bit better than pure HTML, but you still run into many of the same problems we just identified.<\/p>\r\n\r\n\r\n\r\n<p>Take this example from Codepen:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/tooltip-using-html-css_874bc89dffe1abd669f19ba83e282edd_800.jpeg\" alt=\"CSS tooltip bad\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>Not bad-looking.<\/p>\r\n\r\n\r\n\r\n<p>But here\u2019s a screenshot from the code you need to make this:<\/p>\r\n\r\n\r\n\r\n<div class=\"wp-block-image image regular\">\r\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/images.storychief.com\/account_6827\/Screenshot2021-03-25at11_04_34_0d47d4e5f52928a9adcbb827043adfce_800.jpg\" alt=\"CSS tooltip code\" \/><\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n<p>The code is actually so long that we figured putting all of it into the article would overwhelm the reader. If you want to view all of it, you can do so <a href=\"https:\/\/codepen.io\/hannuis\/pen\/BeJwbj\" rel=\"nofollow\">here<\/a>.<\/p>\r\n\r\n\r\n\r\n<p><strong>Here are the problems we see with this approach:<\/strong><\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>CSS templates do exist &#8211; sharing those among developers is basically why <a href=\"https:\/\/codepen.io\/\" rel=\"nofollow\">Codepen<\/a> exists as a website. But you have to look up the templates manually, as opposed to receiving them in-app with no effort.<\/li>\r\n<li>Note again just how many elements there are that need to be specified by the developer manually.<\/li>\r\n<li>And think about all the developer time this would take up. Wouldn\u2019t you rather your devs were building your product itself, instead of making the UI easier to use?<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\" id=\"duteo\"><strong>Conclusion<\/strong><\/h2>\r\n\r\n\r\n\r\n<p>The easiest way to build tooltips is without using code. Tooltips are a fantastic piece of UI that your customers will appreciate, but if you ask your devs to spend hours coding them manually, your SaaS business will never get off the ground!<\/p>\r\n<p><span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">Engage mobile app users by creating personalized messaging, push notifications, and surveys, and see how easy it is to build tooltips on Userpilot. Book a\u00a0<a href=\"https:\/\/userpilot.com\/userpilot-demo\" target=\"_blank\" rel=\"noopener\">free demo<\/a> today by clicking the banner below!<\/span><!-- End strchf script --><\/p>\r\n\r\n\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>Tooltips are a fantastic bit of UI that point users to new features. But building them with code can be a headache. Luckily, there&#8217;s a code-free solution!<\/p>\n","protected":false},"author":24,"featured_media":8886,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[293,290,48],"tags":[561,562,92,563,564],"class_list":["post-8225","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-marketing","category-updated","category-user-onboarding-category","tag-how-to-create-a-tooltip","tag-how-to-create-tooltips","tag-onboarding-ux","tag-tooltip-how-to","tag-tooltip-without-code"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How To Create A Tooltip With HTML, CSS or No Code [EASY]<\/title>\n<meta name=\"description\" content=\"Tooltips help point users to new features. But building them with code can be a headache. Luckily, there&#039;s a code-free solution!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create A Tooltip With HTML, CSS or No Code [EASY]\" \/>\n<meta property=\"og:description\" content=\"Tooltips help point users to new features. But building them with code can be a headache. Luckily, there&#039;s a code-free solution!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/\" \/>\n<meta property=\"og:site_name\" content=\"Thoughts about Product Adoption, User Onboarding and Good UX | Userpilot Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-26T13:26:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-10T18:34:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/userpilot.com\/blog\/wp-content\/uploads\/2021\/03\/How-To-Create-Tooltips.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1126\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Emilia Korczynska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emilia Korczynska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/\"},\"author\":{\"name\":\"Emilia Korczynska\",\"@id\":\"https:\/\/userpilot.com\/blog\/#\/schema\/person\/5796e18acd5548943b72c36d3469e61d\"},\"headline\":\"How To Create A Tooltip With HTML, CSS or No Code [EASY]\",\"datePublished\":\"2021-11-26T13:26:31+00:00\",\"dateModified\":\"2025-05-10T18:34:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/\"},\"wordCount\":2005,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog-static.userpilot.com\/blog\/wp-content\/uploads\/2021\/03\/How-To-Create-Tooltips.jpg\",\"keywords\":[\"how to create a tooltip\",\"how to create tooltips\",\"Onboarding UX\",\"tooltip how to\",\"tooltip without code\"],\"articleSection\":[\"Product Marketing\",\"Updated\",\"User Onboarding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/\",\"url\":\"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/\",\"name\":\"How To Create A Tooltip With HTML, CSS or No Code [EASY]\",\"isPartOf\":{\"@id\":\"https:\/\/userpilot.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog-static.userpilot.com\/blog\/wp-content\/uploads\/2021\/03\/How-To-Create-Tooltips.jpg\",\"datePublished\":\"2021-11-26T13:26:31+00:00\",\"dateModified\":\"2025-05-10T18:34:15+00:00\",\"author\":{\"@id\":\"https:\/\/userpilot.com\/blog\/#\/schema\/person\/5796e18acd5548943b72c36d3469e61d\"},\"description\":\"Tooltips help point users to new features. But building them with code can be a headache. Luckily, there's a code-free solution!\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/#primaryimage\",\"url\":\"https:\/\/blog-static.userpilot.com\/blog\/wp-content\/uploads\/2021\/03\/How-To-Create-Tooltips.jpg\",\"contentUrl\":\"https:\/\/blog-static.userpilot.com\/blog\/wp-content\/uploads\/2021\/03\/How-To-Create-Tooltips.jpg\",\"width\":2000,\"height\":1126,\"caption\":\"how to create a tooltip\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/userpilot.com\/blog\/#website\",\"url\":\"https:\/\/userpilot.com\/blog\/\",\"name\":\"Thoughts about Product Adoption, User Onboarding and Good UX | Userpilot Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/userpilot.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/userpilot.com\/blog\/#\/schema\/person\/5796e18acd5548943b72c36d3469e61d\",\"name\":\"Emilia Korczynska\",\"description\":\"Passionate about SaaS product growth, and both pre-sign-up and post-sign-up marketing. Talk to me about improving your acquisition, activation, and retention strategy. VP of Marketing at Userpilot.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/emiliakorczynska\/\"],\"url\":\"https:\/\/userpilot.com\/blog\/author\/emiliauserpilot-io\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How To Create A Tooltip With HTML, CSS or No Code [EASY]","description":"Tooltips help point users to new features. But building them with code can be a headache. Luckily, there's a code-free solution!","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:\/\/userpilot.com\/blog\/how-to-create-tooltips\/","og_locale":"en_US","og_type":"article","og_title":"How To Create A Tooltip With HTML, CSS or No Code [EASY]","og_description":"Tooltips help point users to new features. But building them with code can be a headache. Luckily, there's a code-free solution!","og_url":"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/","og_site_name":"Thoughts about Product Adoption, User Onboarding and Good UX | Userpilot Blog","article_published_time":"2021-11-26T13:26:31+00:00","article_modified_time":"2025-05-10T18:34:15+00:00","og_image":[{"width":2000,"height":1126,"url":"https:\/\/userpilot.com\/blog\/wp-content\/uploads\/2021\/03\/How-To-Create-Tooltips.jpg","type":"image\/jpeg"}],"author":"Emilia Korczynska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Emilia Korczynska","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/#article","isPartOf":{"@id":"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/"},"author":{"name":"Emilia Korczynska","@id":"https:\/\/userpilot.com\/blog\/#\/schema\/person\/5796e18acd5548943b72c36d3469e61d"},"headline":"How To Create A Tooltip With HTML, CSS or No Code [EASY]","datePublished":"2021-11-26T13:26:31+00:00","dateModified":"2025-05-10T18:34:15+00:00","mainEntityOfPage":{"@id":"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/"},"wordCount":2005,"commentCount":0,"image":{"@id":"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/#primaryimage"},"thumbnailUrl":"https:\/\/blog-static.userpilot.com\/blog\/wp-content\/uploads\/2021\/03\/How-To-Create-Tooltips.jpg","keywords":["how to create a tooltip","how to create tooltips","Onboarding UX","tooltip how to","tooltip without code"],"articleSection":["Product Marketing","Updated","User Onboarding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/","url":"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/","name":"How To Create A Tooltip With HTML, CSS or No Code [EASY]","isPartOf":{"@id":"https:\/\/userpilot.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/#primaryimage"},"image":{"@id":"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/#primaryimage"},"thumbnailUrl":"https:\/\/blog-static.userpilot.com\/blog\/wp-content\/uploads\/2021\/03\/How-To-Create-Tooltips.jpg","datePublished":"2021-11-26T13:26:31+00:00","dateModified":"2025-05-10T18:34:15+00:00","author":{"@id":"https:\/\/userpilot.com\/blog\/#\/schema\/person\/5796e18acd5548943b72c36d3469e61d"},"description":"Tooltips help point users to new features. But building them with code can be a headache. Luckily, there's a code-free solution!","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/userpilot.com\/blog\/how-to-create-tooltips\/#primaryimage","url":"https:\/\/blog-static.userpilot.com\/blog\/wp-content\/uploads\/2021\/03\/How-To-Create-Tooltips.jpg","contentUrl":"https:\/\/blog-static.userpilot.com\/blog\/wp-content\/uploads\/2021\/03\/How-To-Create-Tooltips.jpg","width":2000,"height":1126,"caption":"how to create a tooltip"},{"@type":"WebSite","@id":"https:\/\/userpilot.com\/blog\/#website","url":"https:\/\/userpilot.com\/blog\/","name":"Thoughts about Product Adoption, User Onboarding and Good UX | Userpilot Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/userpilot.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/userpilot.com\/blog\/#\/schema\/person\/5796e18acd5548943b72c36d3469e61d","name":"Emilia Korczynska","description":"Passionate about SaaS product growth, and both pre-sign-up and post-sign-up marketing. Talk to me about improving your acquisition, activation, and retention strategy. VP of Marketing at Userpilot.","sameAs":["https:\/\/www.linkedin.com\/in\/emiliakorczynska\/"],"url":"https:\/\/userpilot.com\/blog\/author\/emiliauserpilot-io\/"}]}},"_links":{"self":[{"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/posts\/8225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/comments?post=8225"}],"version-history":[{"count":3,"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/posts\/8225\/revisions"}],"predecessor-version":[{"id":271600,"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/posts\/8225\/revisions\/271600"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/media\/8886"}],"wp:attachment":[{"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/media?parent=8225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/categories?post=8225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/userpilot.com\/blog\/wp-json\/wp\/v2\/tags?post=8225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}