{"id":2012,"date":"2015-01-12T13:15:26","date_gmt":"2015-01-12T11:15:26","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=2012"},"modified":"2018-06-19T11:08:39","modified_gmt":"2018-06-19T08:08:39","slug":"jquery-tooltip-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/","title":{"rendered":"jQuery Tooltip Example"},"content":{"rendered":"<p><strong>EDITORIAL NOTE<\/strong>: In this post, we feature a comprehensive jQuery Tooltip Example.<\/p>\n<p style=\"text-align: justify;\">Tooltips are a very useful element in web development, as it makes it easy to <strong>present information and explanations to the user without cluttering the page<\/strong>. Essentially, a tooltip is a &#8220;hover box&#8221; that appears when we hover the mouse cursor over a specific element. That way, the information will be presented in real-time, only when the user actually needs to see it, maintaining the simplicity of the page.<\/p>\n<p>[ulp id=&#8217;qGGDqWnle19VavkM&#8217;]<\/p>\n<p style=\"text-align: justify;\">JQuery UI provides its own tooltip implementation, which can be used very easily with only a few lines of code. In this example we are going to show how to use it, and the script files needed to achieve this, which are:<\/p>\n<ul style=\"text-align: justify;\">\n<li>JQuery 2.1.1<\/li>\n<li>JQuery UI<\/li>\n<\/ul>\n<h2 style=\"text-align: justify;\"><\/h2>\n<h2 style=\"text-align: justify;\">1. JQuery Tooltip: How to use.<\/h2>\n<p style=\"text-align: justify;\">Let&#8217;s say that we have a simple web page and we need to provide additional information in various places, so we need to <strong>apply the tooltip to the whole document<\/strong>. This can be easily achieved using the following code:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\/\/ Enable tooltip for the whole document.\r\n$(document).tooltip();\r\n<\/pre>\n<p style=\"text-align: justify;\">Using standard JQuery selectors (like the above) we can apply the <code>tooltip()<\/code> method to other classes, ids etc. Afterwards, it is really easy to apply a specific tooltip to an element, just by using the <code>title<\/code> attribute inside the tag, like this:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;div title=&quot;Information about what happens here...&quot;&gt;Welcome to this page!&lt;\/div&gt;\r\n<\/pre>\n<p style=\"text-align: justify;\">Of course, there are also other attributes that you can use in order to customize your JQuery tooltip. which can be passed as arguments to the <code>tooltip()<\/code> method. The most important of them are:<\/p>\n<ul style=\"text-align: justify;\">\n<li><code>show<\/code><strong>:<\/strong> It determines how the tooltip will appear on screen, using the effect and the delay attributes, e.g:\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">show: {\u00a0effect: &quot;slideDown&quot;,\u00a0delay: 100\u00a0}<\/pre>\n<\/li>\n<li><code>hide<\/code><strong>:<\/strong> Similar to show, it determines how the tooltip will disappear, when the mouse does not hover over the page element anymore, e.g:\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">hide: {\u00a0effect: &quot;fade&quot;,\u00a0delay: 200\u00a0}<\/pre>\n<\/li>\n<li><code>track<\/code><strong>:<\/strong> It tracks the mouse movement, in order to make the tooltip to follow the mouse (as long as it remains within the limits of the element). The only applicable parameters here are <code>true<\/code> and <code>false<\/code>.<\/li>\n<li><code>position<\/code><strong>:<\/strong> It determines the position on which the tooltip will appear. The valid options are the the combinations of <strong>top, center, bottom<\/strong> and <strong>left, right<\/strong>.<\/li>\n<li><code>open<\/code><strong>:<\/strong> This attribute needs a whole function, which will run every time a tooltip is being initialized.<\/li>\n<\/ul>\n<h2 style=\"text-align: justify;\"><\/h2>\n<h2 style=\"text-align: justify;\">2. JQuery Tooltip Example.<\/h2>\n<p style=\"text-align: justify;\">Let&#8217;s show a complete example of how we could use JQuery tooltip during the development of a page or a web application! No matter the tag name, the process is the same, and you will always need to apply the <code>title<\/code> attribute for each one of the tags that need to have a tooltip.<\/p>\n<p style=\"text-align: justify;\">Of course, as always with web pages and web applications, we have to<strong> import the appropriate JavaScript and CSS files that are going to be used<\/strong>. In our case, since this is an example about the UI capabilities of JQuery, we are going to need <strong>JQuery<\/strong>, <strong>JQuery UI<\/strong> (the .js files), as well as the <strong>JQuery UI theme<\/strong> .css file, which is the &#8220;visual&#8221; part of JQuery UI. The process is the same every time:<\/p>\n<ul>\n<li style=\"text-align: justify;\">For the .js files:\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;script src=&quot;path\/to\/js\/file&quot;&gt;&lt;\/script&gt;\r\n<\/pre>\n<\/li>\n<li style=\"text-align: justify;\">For the .css files:\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;link rel=&quot;stylesheet&quot; href=&quot;path\/to\/css\/file&quot;&gt;\r\n<\/pre>\n<\/li>\n<\/ul>\n<p><em>tooltipExample.html<\/em><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;Tooltip Example&lt;\/title&gt;\r\n\t&lt;script src=&quot;jquery-2.1.1.min.js&quot;&gt;&lt;\/script&gt;\r\n\t&lt;script src=&quot;jquery-ui.min.js&quot;&gt;&lt;\/script&gt;\r\n\t&lt;link rel=&quot;stylesheet&quot; href=&quot;jquery-ui.theme.min.css&quot;&gt;\r\n\r\n\t&lt;script&gt;\r\n\t   \/\/ Enable tooltip for the whole document.\r\n\t   $(document).tooltip({\r\n\t\t   show: {\r\n\t\t\t   effect: &quot;slideDown&quot;,\r\n               delay: 100\r\n\t\t   },\r\n\t\t   hide: {\r\n\t\t        effect: &quot;fade&quot;,\r\n\t\t        delay: 200\r\n\t\t   },\r\n\t\t   position: {\r\n\t\t\t   at: &quot;center right&quot;\r\n\t\t   },\r\n\t\t   track: true,\r\n\r\n\t\t   open: function (event, ui) {\r\n\t\t\t   \/\/ We can apply specific CSS properties to the tooltip,\r\n\t\t\t   \/\/ by using just JS.\r\n               ui.tooltip.css(&quot;max-width&quot;, &quot;300px&quot;);\r\n               ui.tooltip.css(&quot;border&quot;, &quot;2px solid black&quot;);\r\n          }\r\n\t   });\r\n\t&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;h2 title=&quot;This is the tooltip for the title!&quot;&gt;This is a Tooltip Example!&lt;\/h2&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p style=\"text-align: justify;\">The result from the above code will be a hover box which will show everything that we gave as an input to the <code>title<\/code> tag. Take a look at this screenshot:<\/p>\n<figure id=\"attachment_2018\" aria-describedby=\"caption-attachment-2018\" style=\"width: 535px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/12\/tooltip1.jpg\"><img decoding=\"async\" class=\"wp-image-2018 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/12\/tooltip1.jpg\" alt=\"jQuery Tooltip when the mouse is hovering over the text.\" width=\"535\" height=\"229\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/12\/tooltip1.jpg 535w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/12\/tooltip1-300x128.jpg 300w\" sizes=\"(max-width: 535px) 100vw, 535px\" \/><\/a><figcaption id=\"caption-attachment-2018\" class=\"wp-caption-text\">The tooltip, when the mouse is hovering over the text.<\/figcaption><\/figure>\n<h2 style=\"text-align: justify;\">3.\u00a0Download the Example<\/h2>\n<p style=\"text-align: justify;\">This was an example of JQuery tooltip.<\/p>\n<div class=\"download\" style=\"text-align: justify;\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here:\u00a0<strong><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/12\/JQueryTooltip1.zip\">JQueryTooltip<\/a><\/strong><\/div>\n","protected":false},"excerpt":{"rendered":"<p>EDITORIAL NOTE: In this post, we feature a comprehensive jQuery Tooltip Example. Tooltips are a very useful element in web development, as it makes it easy to present information and explanations to the user without cluttering the page. Essentially, a tooltip is a &#8220;hover box&#8221; that appears when we hover the mouse cursor over a &hellip;<\/p>\n","protected":false},"author":37,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[69],"class_list":["post-2012","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-tooltip"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>jQuery Tooltip Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn more about jQuery Tooltip? Check out our Example where we are going to show how to use it, and the script files needed to achieve this!\" \/>\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.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery Tooltip Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn more about jQuery Tooltip? Check out our Example where we are going to show how to use it, and the script files needed to achieve this!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-12T11:15:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-06-19T08:08:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ilias Koutsakis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ilias Koutsakis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/\"},\"author\":{\"name\":\"Ilias Koutsakis\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/648a4104d9240e6597e2bbb816d559b8\"},\"headline\":\"jQuery Tooltip Example\",\"datePublished\":\"2015-01-12T11:15:26+00:00\",\"dateModified\":\"2018-06-19T08:08:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/\"},\"wordCount\":816,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"keywords\":[\"tooltip\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/\",\"name\":\"jQuery Tooltip Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-01-12T11:15:26+00:00\",\"dateModified\":\"2018-06-19T08:08:39+00:00\",\"description\":\"Interested to learn more about jQuery Tooltip? Check out our Example where we are going to show how to use it, and the script files needed to achieve this!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery Tooltip Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/648a4104d9240e6597e2bbb816d559b8\",\"name\":\"Ilias Koutsakis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e4b2d1924353b9e48fa54d7f13cb049f9c2d330c341c7b491d52c621eb514b26?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e4b2d1924353b9e48fa54d7f13cb049f9c2d330c341c7b491d52c621eb514b26?s=96&d=mm&r=g\",\"caption\":\"Ilias Koutsakis\"},\"description\":\"Ilias has graduated from the Department of Informatics and Telecommunications of the National and Kapodistrian University of Athens. He is interested in all aspects of software engineering, particularly data mining, and loves the challenge of working with new technologies. He is pursuing the dream of clean and readable code on a daily basis.\",\"sameAs\":[\"http:\/\/www.webcodegeeks.com\/\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/ilias-koutsakis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery Tooltip Example - Web Code Geeks - 2026","description":"Interested to learn more about jQuery Tooltip? Check out our Example where we are going to show how to use it, and the script files needed to achieve this!","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.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery Tooltip Example - Web Code Geeks - 2026","og_description":"Interested to learn more about jQuery Tooltip? Check out our Example where we are going to show how to use it, and the script files needed to achieve this!","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2015-01-12T11:15:26+00:00","article_modified_time":"2018-06-19T08:08:39+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Ilias Koutsakis","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Ilias Koutsakis","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/"},"author":{"name":"Ilias Koutsakis","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/648a4104d9240e6597e2bbb816d559b8"},"headline":"jQuery Tooltip Example","datePublished":"2015-01-12T11:15:26+00:00","dateModified":"2018-06-19T08:08:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/"},"wordCount":816,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","keywords":["tooltip"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/","name":"jQuery Tooltip Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-01-12T11:15:26+00:00","dateModified":"2018-06-19T08:08:39+00:00","description":"Interested to learn more about jQuery Tooltip? Check out our Example where we are going to show how to use it, and the script files needed to achieve this!","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-tooltip-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery Tooltip Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/648a4104d9240e6597e2bbb816d559b8","name":"Ilias Koutsakis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e4b2d1924353b9e48fa54d7f13cb049f9c2d330c341c7b491d52c621eb514b26?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e4b2d1924353b9e48fa54d7f13cb049f9c2d330c341c7b491d52c621eb514b26?s=96&d=mm&r=g","caption":"Ilias Koutsakis"},"description":"Ilias has graduated from the Department of Informatics and Telecommunications of the National and Kapodistrian University of Athens. He is interested in all aspects of software engineering, particularly data mining, and loves the challenge of working with new technologies. He is pursuing the dream of clean and readable code on a daily basis.","sameAs":["http:\/\/www.webcodegeeks.com\/"],"url":"https:\/\/www.webcodegeeks.com\/author\/ilias-koutsakis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=2012"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2012\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=2012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=2012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=2012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}