{"id":19244,"date":"2014-02-04T15:02:43","date_gmt":"2014-02-04T07:02:43","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19244"},"modified":"2025-04-04T01:42:13","modified_gmt":"2025-04-03T17:42:13","slug":"css-animated-tooltip","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/","title":{"rendered":"Creating Animated Tooltip Easily with Hint.css"},"content":{"rendered":"<p><strong>Tooltip<\/strong> is a great way to display extra information on a website without taking extra space<em>.<\/em> The tooltip generally <strong>appears upon mouse hover<\/strong>, and there are probably of hundreds of <a href=\"https:\/\/www.hongkiat.com\/blog\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/\">jQuery plugins to<\/a> include fancy tooltips on your website.<\/p>\n<p>However, some common downsides of using jQuery plugin is that it comes with a set of useless options, and bloated with codes that <a href=\"https:\/\/www.hongkiat.com\/blog\/website-speed-and-performance-check-tools\/\">slow down website performance<\/a>.<\/p>\n<p>So, today, we are going to take a look at an alternative of creating tooltip. With a bunch of new features in CSS3, it is now possible to create a comparable fancy tooltip only using CSS. Let\u2019s get started.<\/p>\n<h2>Using Hint.css<\/h2>\n<p>In this post, we are not going to build it from scratch. We will be using <a rel=\"nofollow noopener\" href=\"https:\/\/kushagra.dev\/lab\/hint\/\">Hint.css<\/a>. Hint.css is a collection of classes and style rules, allowing us to create a simple tooltip more quickly. To use, simply add the stylesheet to your HTML document, or copy all the style rules to your own stylesheet.<\/p>\n<pre>\r\n &lt;link rel=\"stylesheet\" href=\"hint.css\"&gt;\r\n <\/pre>\n<p>Now, in your document text, wrap the piece you want to insert a tooltip with an inline element, like using a span or anchor element. And add the tooltip content with the <code>data-hint<\/code> attribute, like so.<\/p>\n<pre>\r\n However, because the freelance &lt;span data-hint=\"The arena of commercial dealings\"&gt;marketplaces&lt;\/span&gt; across the globe are filled with freelance contractors all tendering for a limited amount of jobs.\r\n <\/pre>\n<p>Technically, this is all you required. If you preview your document in the browser and roll over your mouse, you should see the tooltip pop up.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-animated-tooltip\/basic-tooltip.jpg\" alt=\"baisc tooltip\" width=\"500\" height=\"150\"><\/figure>\n<p>This tooltip is displayed with <a href=\"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/\">pseudo-element<\/a>, and using CSS3 Transition for the animated move.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/\" class=\"ref-block__link\" title=\"Read More: Understanding Pseudo-Element :before and :after\" rel=\"bookmark\"><span class=\"screen-reader-text\">Understanding Pseudo-Element :before and :after<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/pseudo-element-before-after.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-14256 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/pseudo-element-before-after.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Understanding Pseudo-Element :before and :after<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tCascading Style Sheet (CSS) is primarily intended for applying styles to the HTML markup, however in some cases...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Give it a clue<\/h2>\n<p>Unless you are using an anchor element that comes with distinctive styles by default, there is no indication showing that the particular word will show a tooltip like what you see in the screenshot above, and thus, users, will most likely be clueless.<\/p>\n<p>So, for the sake of better user experience, we can <strong>add some extra styles to give it an indicator<\/strong>, for example:<\/p>\n<pre>\r\nspan[data-hint] {\r\n  border-bottom: 1px dotted #aaa;\r\n}\r\n\r\nspan[data-hint]:hover {\r\n  cursor: pointer;\r\n}\r\n<\/pre>\n<p>These styles will give the span element with <code>data-hint<\/code> attribute a dotted border bottom. You can adjust the styles to meet your design requirement.<\/p>\n<h2>Tooltip Direction<\/h2>\n<p>We can show the tooltip in four different directions: top, bottom, right, and left using the provided classes.<\/p>\n<p><strong>Left<\/strong><\/p>\n<pre>\r\n &lt;span class=\"hint--left\" data-hint=\"The arena of commercial dealings\"&gt;marketplaces&lt;\/span&gt;\r\n <\/pre>\n<p><strong>Right<\/strong><\/p>\n<pre>\r\n &lt;span class=\"hint--right\" data-hint=\"The arena of commercial dealings\"&gt;marketplaces&lt;\/span&gt;\r\n <\/pre>\n<p><strong>Top<\/strong><\/p>\n<pre>\r\n &lt;span class=\"hint--top\" data-hint=\"The arena of commercial dealings\"&gt;marketplaces&lt;\/span&gt;\r\n <\/pre>\n<p><strong>Bottom<\/strong><\/p>\n<pre>\r\n &lt;span class=\"hint--bottom\" data-hint=\"The arena of commercial dealings\"&gt;marketplaces&lt;\/span&gt;\r\n <\/pre>\n<p>Or keep showing the Tooltip<\/p>\n<pre>\r\n &lt;span class=\"hint--always\" data-hint=\"The arena of commercial dealings\"&gt;marketplaces&lt;\/span&gt;\r\n <\/pre>\n<h2>Final Thought<\/h2>\n<p>With more advanced properties in CSS3, today, we are no longer solely rely on JavaScript or jQuery to create a fancy UI, like creating a Tooltip, and using <strong>Hint.css<\/strong>, we can create one in snap. But as stated early in this post, this technique only allows us for creating a <strong>simple text-based tooltip<\/strong>.<\/p>\n<p>If you want to create a more advanced tooltip, say, a tooltip with image or showing the tooltip upon mouse click rather than on mouse hover, using JavaScript or jQuery is still the better way to go.<\/p>","protected":false},"excerpt":{"rendered":"<p>Tooltip is a great way to display extra information on a website without taking extra space. The tooltip generally appears upon mouse hover, and there are probably of hundreds of jQuery plugins to include fancy tooltips on your website. However, some common downsides of using jQuery plugin is that it comes with a set of&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[507,506,2016,3414],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Creating Animated Tooltip Easily with Hint.css - Hongkiat<\/title>\n<meta name=\"description\" content=\"Tooltip is a great way to display extra information on a website without taking extra space. The tooltip generally appears upon mouse hover, and there are\" \/>\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\/css-animated-tooltip\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Animated Tooltip Easily with Hint.css\" \/>\n<meta property=\"og:description\" content=\"Tooltip is a great way to display extra information on a website without taking extra space. The tooltip generally appears upon mouse hover, and there are\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/\" \/>\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=\"2014-02-04T07:02:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:42:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-animated-tooltip\/basic-tooltip.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-tooltip\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-tooltip\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Creating Animated Tooltip Easily with Hint.css\",\"datePublished\":\"2014-02-04T07:02:43+00:00\",\"dateModified\":\"2025-04-03T17:42:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-tooltip\\\/\"},\"wordCount\":465,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-tooltip\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-animated-tooltip\\\/basic-tooltip.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\",\"toolkit\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-tooltip\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-tooltip\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-tooltip\\\/\",\"name\":\"Creating Animated Tooltip Easily with Hint.css - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-tooltip\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-tooltip\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-animated-tooltip\\\/basic-tooltip.jpg\",\"datePublished\":\"2014-02-04T07:02:43+00:00\",\"dateModified\":\"2025-04-03T17:42:13+00:00\",\"description\":\"Tooltip is a great way to display extra information on a website without taking extra space. The tooltip generally appears upon mouse hover, and there are\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-tooltip\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-tooltip\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-tooltip\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-animated-tooltip\\\/basic-tooltip.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-animated-tooltip\\\/basic-tooltip.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-animated-tooltip\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Animated Tooltip Easily with Hint.css\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating Animated Tooltip Easily with Hint.css - Hongkiat","description":"Tooltip is a great way to display extra information on a website without taking extra space. The tooltip generally appears upon mouse hover, and there are","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\/css-animated-tooltip\/","og_locale":"en_US","og_type":"article","og_title":"Creating Animated Tooltip Easily with Hint.css","og_description":"Tooltip is a great way to display extra information on a website without taking extra space. The tooltip generally appears upon mouse hover, and there are","og_url":"https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-02-04T07:02:43+00:00","article_modified_time":"2025-04-03T17:42:13+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-animated-tooltip\/basic-tooltip.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Creating Animated Tooltip Easily with Hint.css","datePublished":"2014-02-04T07:02:43+00:00","dateModified":"2025-04-03T17:42:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/"},"wordCount":465,"commentCount":4,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-animated-tooltip\/basic-tooltip.jpg","keywords":["CSS","HTML","HTML5 \/ CSS3 Tutorials","toolkit"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/","url":"https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/","name":"Creating Animated Tooltip Easily with Hint.css - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-animated-tooltip\/basic-tooltip.jpg","datePublished":"2014-02-04T07:02:43+00:00","dateModified":"2025-04-03T17:42:13+00:00","description":"Tooltip is a great way to display extra information on a website without taking extra space. The tooltip generally appears upon mouse hover, and there are","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-animated-tooltip\/basic-tooltip.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-animated-tooltip\/basic-tooltip.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-animated-tooltip\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Animated Tooltip Easily with Hint.css"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-50o","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19244","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19244"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19244\/revisions"}],"predecessor-version":[{"id":73658,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19244\/revisions\/73658"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19244"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}