{"id":1760,"date":"2016-08-11T16:42:53","date_gmt":"2016-08-11T16:42:53","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=1760"},"modified":"2024-06-03T17:53:49","modified_gmt":"2024-06-03T17:53:49","slug":"create-simple-css-tooltip","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/create-simple-css-tooltip\/","title":{"rendered":"How to Create Tooltip with CSS"},"content":{"rendered":"<p>A tooltip provides extra information when the user hovers over the element. Tooltips are a great way to show details information to the user by hovering over a text or image and it helps to improve the user experience of your website. Using tooltips you can display image captions, description for links, and useful information. You can easily create a tooltip with CSS without using JavaScript or jQuery. <\/p>\n<p>In this tutorial, we will show you how to create tooltip on hover text or image using pure CSS. Here we&#8217;ll provide a short code snippet to create simple CSS tooltip that appears when the user moves the mouse pointer over a text with fade in animation. Also, you&#8217;ll be able to place the tooltip in the different positions (Top, Bottom, Left, and Right) of hoverable text.<\/p>\n<h2>HTML Code<\/h2>\n<p>Add <code>tooltip<\/code> class to text with tooltip position class (<code>top<\/code> or <code>bottom<\/code> or <code>left<\/code> or <code>right<\/code>) on which tooltip would appear and assign <code>tiptext<\/code> class on tooltip content.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"tooltip top\"<\/span>>Hover over me\r\n    &lt;<span style=\"color:#bf4f24\">span<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"tiptext\"<\/span>>CSS Tooltip text&lt;\/<span style=\"color:#bf4f24\">span<\/span>>\r\n&lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n<\/pre>\n<h2>CSS Code<\/h2>\n<p>The following CSS would be same for all tooltips position.<\/p>\n<pre><span style=\"color:#bf4f24\">.tooltip<\/span> {\r\n    <span style=\"color:#691c97\">position<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">relative<\/span>;\r\n    <span style=\"color:#691c97\">display<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">inline-block<\/span>;\r\n    <span style=\"color:#691c97\">border-bottom<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">1<span style=\"color:#794938\">px<\/span><\/span> <span style=\"color:#b4371f\">dotted<\/span> <span style=\"color:#b4371f\">black<\/span>;\r\n}\r\n<span style=\"color:#bf4f24\">.tooltip<\/span> <span style=\"color:#bf4f24\">.tiptext<\/span> {\r\n    <span style=\"color:#691c97\">visibility<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">hidden<\/span>;\r\n    <span style=\"color:#691c97\">width<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">120<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">background-color<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">black<\/span>;\r\n    <span style=\"color:#691c97\">color<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">#fff<\/span>;\r\n    <span style=\"color:#691c97\">text-align<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">center<\/span>;\r\n    <span style=\"color:#691c97\">border-radius<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">3<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">padding<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">6<span style=\"color:#794938\">px<\/span><\/span> <span style=\"color:#811f24;font-weight:700\">0<\/span>;\r\n    <span style=\"color:#691c97\">position<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">absolute<\/span>;\r\n    <span style=\"color:#691c97\">z-index<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">1<\/span>;\r\n    <span style=\"color:#691c97\">box-shadow<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">0<\/span> <span style=\"color:#811f24;font-weight:700\">5<span style=\"color:#794938\">px<\/span><\/span> <span style=\"color:#811f24;font-weight:700\">10<span style=\"color:#794938\">px<\/span><\/span> <span style=\"color:#693a17\">rgba<\/span>(<span style=\"color:#811f24;font-weight:700\">0, 0, 0, 0.2<\/span>);\r\n}\r\n<span style=\"color:#bf4f24\">.tooltip<\/span> <span style=\"color:#bf4f24\">.tiptext<\/span><span style=\"color:#bf4f24\">::after<\/span> {\r\n    <span style=\"color:#691c97\">content<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#0b6125\">\"\"<\/span>;\r\n    <span style=\"color:#691c97\">position<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">absolute<\/span>;\r\n    <span style=\"color:#691c97\">border-width<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">5<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">border-style<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">solid<\/span>;\r\n}\r\n<span style=\"color:#bf4f24\">.tooltip<\/span><span style=\"color:#bf4f24\">:hover<\/span> <span style=\"color:#bf4f24\">.tiptext<\/span> {\r\n    <span style=\"color:#691c97\">visibility<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">visible<\/span>;\r\n}\r\n<\/pre>\n<p>Along with the above CSS use any one of the below CSS.<br \/>\n<b>Top Tooltip CSS:<\/b><\/p>\n<pre><span style=\"color:#bf4f24\">.tooltip<\/span><span style=\"color:#bf4f24\">.top<\/span> <span style=\"color:#bf4f24\">.tiptext<\/span>{\r\n    <span style=\"color:#691c97\">margin-left<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">-60<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">bottom<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">150<span style=\"color:#794938\">%<\/span><\/span>;\r\n    <span style=\"color:#691c97\">left<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">50<span style=\"color:#794938\">%<\/span><\/span>;\r\n}\r\n<span style=\"color:#bf4f24\">.tooltip<\/span><span style=\"color:#bf4f24\">.top<\/span> <span style=\"color:#bf4f24\">.tiptext<\/span><span style=\"color:#bf4f24\">::after<\/span>{\r\n    <span style=\"color:#691c97\">margin-left<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">-5<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">top<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">100<span style=\"color:#794938\">%<\/span><\/span>;\r\n    <span style=\"color:#691c97\">left<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">50<span style=\"color:#794938\">%<\/span><\/span>;\r\n    <span style=\"color:#691c97\">border-color<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">#2E2E2E<\/span> <span style=\"color:#b4371f\">transparent<\/span> <span style=\"color:#b4371f\">transparent<\/span> <span style=\"color:#b4371f\">transparent<\/span>;\r\n}\r\n<\/pre>\n<p><b>Bottom Tooltip CSS:<\/b><\/p>\n<pre><span style=\"color:#bf4f24\">.tooltip<\/span><span style=\"color:#bf4f24\">.bottom<\/span> <span style=\"color:#bf4f24\">.tiptext<\/span>{\r\n    <span style=\"color:#691c97\">margin-left<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">-60<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">top<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">150<span style=\"color:#794938\">%<\/span><\/span>;\r\n    <span style=\"color:#691c97\">left<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">50<span style=\"color:#794938\">%<\/span><\/span>;\r\n}\r\n<span style=\"color:#bf4f24\">.tooltip<\/span><span style=\"color:#bf4f24\">.bottom<\/span> <span style=\"color:#bf4f24\">.tiptext<\/span><span style=\"color:#bf4f24\">::after<\/span>{\r\n    <span style=\"color:#691c97\">margin-left<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">-5<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">bottom<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">100<span style=\"color:#794938\">%<\/span><\/span>;\r\n    <span style=\"color:#691c97\">left<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">50<span style=\"color:#794938\">%<\/span><\/span>;\r\n    <span style=\"color:#691c97\">border-color<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">transparent<\/span> <span style=\"color:#b4371f\">transparent<\/span> <span style=\"color:#811f24;font-weight:700\">#2E2E2E<\/span> <span style=\"color:#b4371f\">transparent<\/span>;\r\n}\r\n<\/pre>\n<p><b>Left Tooltip CSS:<\/b><\/p>\n<pre><span style=\"color:#bf4f24\">.tooltip<\/span><span style=\"color:#bf4f24\">.left<\/span> <span style=\"color:#bf4f24\">.tiptext<\/span>{\r\n    <span style=\"color:#691c97\">top<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">-5<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">right<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">110<span style=\"color:#794938\">%<\/span><\/span>;\r\n}\r\n<span style=\"color:#bf4f24\">.tooltip<\/span><span style=\"color:#bf4f24\">.left<\/span> <span style=\"color:#bf4f24\">.tiptext<\/span><span style=\"color:#bf4f24\">::after<\/span>{\r\n    <span style=\"color:#691c97\">margin-top<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">-5<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">top<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">50<span style=\"color:#794938\">%<\/span><\/span>;\r\n    <span style=\"color:#691c97\">left<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">100<span style=\"color:#794938\">%<\/span><\/span>;\r\n    <span style=\"color:#691c97\">border-color<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">transparent<\/span> <span style=\"color:#b4371f\">transparent<\/span> <span style=\"color:#b4371f\">transparent<\/span> <span style=\"color:#811f24;font-weight:700\">#2E2E2E<\/span>;\r\n}\r\n<\/pre>\n<p><b>Right Tooltip CSS:<\/b><\/p>\n<pre><span style=\"color:#bf4f24\">.tooltip<\/span><span style=\"color:#bf4f24\">.right<\/span> <span style=\"color:#bf4f24\">.tiptext<\/span>{\r\n    <span style=\"color:#691c97\">top<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">-5<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">left<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">110<span style=\"color:#794938\">%<\/span><\/span>;\r\n}\r\n<span style=\"color:#bf4f24\">.tooltip<\/span><span style=\"color:#bf4f24\">.right<\/span> <span style=\"color:#bf4f24\">.tiptext<\/span><span style=\"color:#bf4f24\">::after<\/span>{\r\n    <span style=\"color:#691c97\">margin-top<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">-5<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">top<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">50<span style=\"color:#794938\">%<\/span><\/span>;\r\n    <span style=\"color:#691c97\">right<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">100<span style=\"color:#794938\">%<\/span><\/span>;\r\n    <span style=\"color:#691c97\">border-color<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">transparent<\/span> <span style=\"color:#811f24;font-weight:700\">#2E2E2E<\/span> <span style=\"color:#b4371f\">transparent<\/span> <span style=\"color:#b4371f\">transparent<\/span>;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>A tooltip provides extra information when the user hovers over the element. Tooltips are a great way to show details information to the user by hovering over a text or image and it helps to <\/p>\n","protected":false},"author":1,"featured_media":5634,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[130],"tags":[124,215],"class_list":["post-1760","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","tag-css","tag-tooltip","cat-130-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Create Tooltip with CSS - CodexWorld<\/title>\n<meta name=\"description\" content=\"Hover Tooltip using CSS \u2013 Add tooltip on hover text or link. Simple code snippet to create simple CSS tooltip with pure CSS.\" \/>\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.codexworld.com\/create-simple-css-tooltip\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Tooltip with CSS - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Hover Tooltip using CSS \u2013 Add tooltip on hover text or link. Simple code snippet to create simple CSS tooltip with pure CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/create-simple-css-tooltip\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-11T16:42:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-03T17:53:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/08\/create-tooltip-in-html-with-css-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\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.codexworld.com\\\/create-simple-css-tooltip\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-simple-css-tooltip\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"How to Create Tooltip with CSS\",\"datePublished\":\"2016-08-11T16:42:53+00:00\",\"dateModified\":\"2024-06-03T17:53:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-simple-css-tooltip\\\/\"},\"wordCount\":203,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-simple-css-tooltip\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/create-tooltip-in-html-with-css-codexworld.png\",\"keywords\":[\"CSS\",\"Tooltip\"],\"articleSection\":[\"HTML&amp;CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/create-simple-css-tooltip\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-simple-css-tooltip\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/create-simple-css-tooltip\\\/\",\"name\":\"How to Create Tooltip with CSS - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-simple-css-tooltip\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-simple-css-tooltip\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/create-tooltip-in-html-with-css-codexworld.png\",\"datePublished\":\"2016-08-11T16:42:53+00:00\",\"dateModified\":\"2024-06-03T17:53:49+00:00\",\"description\":\"Hover Tooltip using CSS \u2013 Add tooltip on hover text or link. Simple code snippet to create simple CSS tooltip with pure CSS.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-simple-css-tooltip\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/create-simple-css-tooltip\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-simple-css-tooltip\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/create-tooltip-in-html-with-css-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/08\\\/create-tooltip-in-html-with-css-codexworld.png\",\"width\":1920,\"height\":1080,\"caption\":\"create-tooltip-in-html-with-css-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/create-simple-css-tooltip\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create Tooltip with CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Tooltip with CSS - CodexWorld","description":"Hover Tooltip using CSS \u2013 Add tooltip on hover text or link. Simple code snippet to create simple CSS tooltip with pure CSS.","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.codexworld.com\/create-simple-css-tooltip\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Tooltip with CSS - CodexWorld","og_description":"Hover Tooltip using CSS \u2013 Add tooltip on hover text or link. Simple code snippet to create simple CSS tooltip with pure CSS.","og_url":"https:\/\/www.codexworld.com\/create-simple-css-tooltip\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2016-08-11T16:42:53+00:00","article_modified_time":"2024-06-03T17:53:49+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/08\/create-tooltip-in-html-with-css-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/create-simple-css-tooltip\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/create-simple-css-tooltip\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"How to Create Tooltip with CSS","datePublished":"2016-08-11T16:42:53+00:00","dateModified":"2024-06-03T17:53:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/create-simple-css-tooltip\/"},"wordCount":203,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/create-simple-css-tooltip\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/08\/create-tooltip-in-html-with-css-codexworld.png","keywords":["CSS","Tooltip"],"articleSection":["HTML&amp;CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/create-simple-css-tooltip\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/create-simple-css-tooltip\/","url":"https:\/\/www.codexworld.com\/create-simple-css-tooltip\/","name":"How to Create Tooltip with CSS - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/create-simple-css-tooltip\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/create-simple-css-tooltip\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/08\/create-tooltip-in-html-with-css-codexworld.png","datePublished":"2016-08-11T16:42:53+00:00","dateModified":"2024-06-03T17:53:49+00:00","description":"Hover Tooltip using CSS \u2013 Add tooltip on hover text or link. Simple code snippet to create simple CSS tooltip with pure CSS.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/create-simple-css-tooltip\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/create-simple-css-tooltip\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/create-simple-css-tooltip\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/08\/create-tooltip-in-html-with-css-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/08\/create-tooltip-in-html-with-css-codexworld.png","width":1920,"height":1080,"caption":"create-tooltip-in-html-with-css-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/create-simple-css-tooltip\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"How to Create Tooltip with CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/08\/create-tooltip-in-html-with-css-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-so","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=1760"}],"version-history":[{"count":4,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1760\/revisions"}],"predecessor-version":[{"id":5635,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1760\/revisions\/5635"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5634"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=1760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=1760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=1760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}