{"id":2858,"date":"2018-06-19T23:01:01","date_gmt":"2018-06-19T15:01:01","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=2858"},"modified":"2024-01-30T23:16:09","modified_gmt":"2024-01-30T15:16:09","slug":"tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/","title":{"rendered":"40+ Tooltip Scripts in CSS, JavaScript, and jQuery"},"content":{"rendered":"

Tooltip elements are a fascinating user interface feature. They display a small box with information when your mouse cursor hovers over text or an image<\/strong>. These elements are crucial in enhancing the user experience<\/a>, as they provide instant information without requiring any clicks<\/strong>.<\/p>\n

While the simplest method to add tooltips is through the <ACRONYM><\/code> or <TITLE><\/code> HTML tags, there are various impressive designs and styles achievable with JavaScript and CSS<\/strong> through tooltip scripts. Let\u2019s explore some of these options.<\/p>\n

\n

CSS Tooltips<\/h2>\n

Balloon.css<\/a><\/h3>\n

Balloon.css is a CSS library built with Sass and LESS<\/strong> to create interactive tooltips. You can customize the tooltip\u2019s content and position using the data-<\/code> attribute. The tooltip can be positioned to the left, right, or both sides. Moreover, you can even include Emojis in your tooltip content<\/strong>. You can install Balloon.css via NPM or load it from CDNJS<\/a>.<\/p>\n

\"Interactive<\/figure>\n

Simptip<\/a><\/h3>\n

Simptip is a Sass-based toolkit that allows for easy customization and recompilation to suit your specific needs<\/strong>. The position and content of the tooltip are adjustable through class names and the data-tooltip<\/code> attribute. Simptip is available for download as an NPM, Yarn, or Bower package<\/strong>.<\/p>\n

\"Simptip<\/figure>\n

Hint.css<\/a><\/h3>\n

Hint.css is a widely-used CSS library for tooltip design, adopted by well-known websites like Fiverr<\/a>, Webflow, and Tridiv. Unlike other CSS libraries, Hint.css utilizes the aria-label<\/code> for accessibility, and its size and color can be customized using class names<\/strong> following the BEM methodology<\/a>. Hint.css is available on NPM, Bower, and CDNJS<\/a>.<\/p>\n

\"Hint.css<\/figure>\n

Microtip<\/a><\/h3>\n

Microtip is an excellent CSS library designed with a focus on \u201cAccessibility\u201d. It employs the aria-label<\/code> for tooltip content and the data-<\/code> attribute to adjust tooltip size and positioning<\/strong>. The library uses CSS variables, enabling customization directly within your CSS file. Supported by a range of web and mobile browsers, Microtip is available as an NPM, Yarn package, and on the UNPkg CDN<\/a>.<\/p>\n

\"Microtip<\/figure>\n

Wenk<\/a><\/h3>\n

Wenk is a super lightweight CSS library, weighing just 733 bytes. It\u2019s crafted in cutting-edge CSS using CSSNext, LESS, and SCSS<\/strong>, allowing for extensive customization and recompilation. You can download Wenk from NPM, Yarn, and access it via free CDN services like rawgit.com<\/a> and unpkg.com<\/a>.<\/p>\n

\"Wenk<\/figure>\n

Tooltippy<\/a><\/h3>\n

Tooltippy is another compact CSS library<\/strong>, just about 1 KB in size. It offers a variety of pre-made themes for tooltip styling. Developed with the CSS pre-processor Stylus, Tooltippy allows for easy theme extension and customization<\/strong>. Detailed instructions for use and customization are available here<\/a>.<\/p>\n

\"Tooltippy<\/figure>\n

ElegantTips<\/a><\/h3>\n

ElegantTips comes with a selection of pre-designed themes<\/strong>, easily modified using provided class names<\/a>. This library is unique in that, unlike others that rely on HTML5 data-<\/code> or aria-label<\/code>, it requires an additional element to create the tooltip. This feature allows for including various content types within the tooltip, beyond just text<\/strong>.<\/p>\n

\"ElegantTips<\/figure>\n

Tootik<\/a><\/h3>\n

Tootik is a versatile CSS library offering stylesheets in CSS, LESS, and Sass formats. What sets it apart is its user-friendly GUI for easy tooltip customization<\/strong>. With Tootik, creating custom tooltips is as simple as copying and pasting the generated HTML code.<\/p>\n

\"Tootik<\/figure>\n
\n

VanillaJS Tooltips<\/h2>\n

TippyJS<\/a><\/h3>\n

TippyJS, powered by Popper.js, is a robust JavaScript library that offers a wealth of customization options for tooltips<\/strong>. You can tweak animations, the tooltip arrow, width, size, theme, and more. It also features Callback functions, allowing you to execute specific actions when the tooltip is shown or hidden<\/strong>. These capabilities place TippyJS among the most powerful libraries for creating tooltips in JavaScript.<\/p>\n

\"TippyJS<\/figure>\n

Darsain Tooltip<\/a><\/h3>\n

Darsain Tooltip provides a fundamental yet flexible tooltip implementation. It offers extensive configuration options and a set of class names to modify the tooltip\u2019s appearance<\/strong>. This library is compatible with older browsers, including IE9, and can be adjusted for IE8 compatibility.<\/p>\n

\"Darsain<\/figure>\n

Bubb<\/a><\/h3>\n

Ideal for advanced JavaScript users, Bubb offers comprehensive APIs for more than just simple text display<\/strong>. Users can programmatically add complex HTML content to tooltips. The extensive capabilities of Bubb can be explored in its documentation and examples<\/a>.<\/p>\n

\"Bubb<\/figure>\n

Popper<\/a><\/h3>\n

Popper is a sophisticated library designed for creating elements that \u201cpop\u201d, such as tooltips, popovers, and dropdowns. It serves as the foundation for TippyJS and is utilized by prominent entities like Bootstrap, Microsoft, and Atlassian, showcasing its wide applicability and reliability.<\/p>\n

\"Popper<\/figure>\n

YY Tooltip<\/a><\/h3>\n

YY Tooltip stands out among its counterparts as it eliminates the need for HTML elements or attributes<\/strong>. Functioning solely with JavaScript, it allows for defining content, position, and colors through an Object, making it an ideal choice for full JavaScript web applications.<\/p>\n

\"YY<\/figure>\n

Position.js<\/a><\/h3>\n

Position.js is another top-notch native JavaScript library for tooltips, offering a GUI for easy configuration and code generation<\/strong>. This library is highly compatible and can be used effectively with frameworks like React.js or Vue.js.<\/p>\n

\"Position.js<\/figure>\n

Bezet Tooltip<\/a><\/h3>\n

Bezet Tooltip provides 14 distinct options for tooltip display<\/strong>, such as on the right<\/code>, left<\/code>, bottom<\/code>, and more. It smartly adjusts the tooltip\u2019s position based on the available space<\/strong> around it. Explore its functionalities in the demo<\/a>.<\/p>\n

\"Bezet<\/figure>\n

MouseTip<\/a><\/h3>\n

MouseTip is a JavaScript library that creates a tooltip which moves along with the cursor position<\/strong>. Uniquely, it configures the tooltip with a non-standard mousetip-<\/code> attribute, differing from the typical HTML5 data-<\/code> attribute. This library is conveniently available as an NPM module.<\/p>\n

\"MouseTip<\/figure>\n

Internetips<\/a><\/h3>\n

Internetips offers a tooltip experience similar to MouseTip, with the tooltip tracking the cursor\u2019s movement<\/strong>. Configuration is managed through JavaScript objects rather than HTML, and the attributes are optimized for modern browsers. This library is noted for being both lightweight and quick.<\/p>\n

\"Internetips<\/figure>\n

MTip<\/a><\/h3>\n

MTip is a JavaScript tooltip library known for its excellent browser compatibility<\/strong>, including IE8. It\u2019s fully customizable through various options<\/a> and can be applied to any element, including an img<\/code> tag. This flexibility makes it a versatile choice for web developers.<\/p>\n

\"MTip<\/figure>\n

Bubblesee<\/a><\/h3>\n

Bubblesee is a straightforward and lightweight JavaScript library for creating tooltips. Its simplicity makes it easy to use without complex configuration options. A Sass file is included for those who wish to customize the tooltip\u2019s appearance. Explore its functionalities in the demo<\/a>.<\/p>\n

\"Bubblesee<\/figure>\n

Tipfy<\/a><\/h3>\n

Tipfy, crafted with modern JavaScript ES6, is impressively compact at just 2 KB. The library offers two versions: tipfy.min.js<\/code> for modern ES6 syntax<\/strong>, and tipfy.es5.min.js<\/code> for compatibility with older browsers. It utilizes the data-<\/code> attribute<\/strong> for customization, such as data-tipfy-side<\/code> for tooltip direction and data-tipfy-text<\/code> for tooltip content.<\/p>\n

\"Tipfy's<\/figure>\n
\n

jQuery Tooltips<\/h2>\n

Tooltipster<\/a><\/h3>\n

Tooltipster is a jQuery library offering vast customization options such as theme, animation, touch support, content, open-and-close triggers<\/strong>, and more. It features custom event listeners and callbacks, enabling developers to enhance the tooltip with bespoke functions. Additionally, its compatibility with older browsers like IE6 varies based on the jQuery version used.<\/p>\n

\"Tooltipster<\/figure>\n

Protip<\/a><\/h3>\n

Protip, another comprehensive jQuery plugin, supports 49 positions, HTML content, icon support, custom callbacks<\/strong>, and more. It provides a user-friendly GUI<\/a> for easy tooltip customization.<\/p>\n

\"Protip<\/figure>\n

PowerTip<\/a><\/h3>\n

PowerTip is a jQuery plugin enriched with numerous options and APIs, giving developers various implementation methods. It supports keyboard navigation<\/strong>, allowing tooltips to appear when elements are navigated using the Tab<\/kbd> key. Available as an NPM module, it\u2019s compatible with RequireJS and Browserify.<\/p>\n

\"PowerTip<\/figure>\n

Accessible Aria Tooltip<\/a><\/h3>\n

This jQuery plugin focuses on accessibility, presenting a dialog box with a title, multiline text, and a close button<\/strong>. It stands out for its unique approach to tooltip design.<\/p>\n

\"Accessible<\/figure>\n

TipsJS<\/a><\/h3>\n

TipsJS is a straightforward jQuery plugin with unique features. The tooltip content is set using a data-tooltip<\/code> attribute<\/strong>, and the content can be formatted similarly to Markdown, using symbols like *<\/code> for bold, ~<\/code> for italic, and ^<\/code> for headings.<\/p>\n

\"TipsJS<\/figure>\n

Dark Tooltip<\/a><\/h3>\n

Dark Tooltip offers unique features such as the ability to add a confirm button (Yes and No), dim the background during display, and include HTML elements<\/strong> in the content. The demo page<\/a> showcases its capabilities vividly.<\/p>\n

\"Dark<\/figure>\n

Aria Tooltip<\/a><\/h3>\n

Aria Tooltip is a jQuery plugin compliant with WAI-ARIA 1.1, emphasizing accessibility. It\u2019s responsive, offering different configurations for varying viewport sizes<\/strong>. Available as an NPM module under the name t-aria-tooltip<\/code>, it\u2019s a versatile choice for various applications.<\/p>\n

\"Aria<\/figure>\n

Toolbar.js<\/a><\/h3>\n

Unlike typical tooltip plugins, Toolbar.js creates an interactive toolbar within the tooltip<\/strong>. It contains links with icons that perform actions on click, similar to a standard toolbar. More details can be found in the documentation and examples<\/a>.<\/p>\n

\"Toolbar.js<\/figure>\n
\n

VueJS Tooltips<\/h2>\n

V-Tooltip<\/a><\/h3>\n

V-Tooltip is a Vue.js component that leverages Popper.js<\/a>. It introduces a new directive, v-tooltip<\/code>, applicable to any element for creating tooltips<\/strong>. This directive can hold either the tooltip content or various options<\/a>. Additionally, the v-popover<\/code> component allows for embedding more complex content<\/strong>, such as Vue.js components or HTML, into tooltips.<\/p>\n

\"V-Tooltip<\/figure>\n

Vue-Bulma Tooltip<\/a><\/h3>\n

Vue-Bulma Tooltip is a component of the Vue.js ecosystem, based on the Bulma UI Framework. As part of the Vue Bulma<\/a> collection, this tooltip component is also available as a standalone NPM module named vue-bulma-tooltip<\/code><\/strong>, enhancing its usability in various projects.<\/p>\n

Vue-Directive-Tooltip<\/a><\/h3>\n

Similar to V-Tooltip, Vue-Directive-Tooltip is another component based on Popper.js. It offers the same v-tooltip<\/code> directive for tooltip creation, though it does not include the v-popover<\/code> component<\/strong> found in V-Tooltip.<\/p>\n

\"Vue-Directive-Tooltip\"<\/figure>\n

Vue-Tippy<\/a><\/h3>\n

Vue-Tippy integrates Tippy.js<\/a> into Vue.js as a component. It features a custom directive, v-tippy<\/code>, for adding tooltip content or options<\/strong>. Notably, it can render a custom Vue.js component inside the tooltip using the html<\/code> option.<\/p>\n

\"Vue-Tippy<\/figure>\n

VueJS-Popover<\/a><\/h3>\n

VueJS-Popover is a custom Vue.js tool featuring a directive named v-popover<\/code> and two components, <popover><\/code> and <tooltip><\/code>. This combination offers developers flexible ways to integrate tooltips into Vue.js applications.<\/p>\n

\"VueJS-Popover<\/figure>\n

Vue-Hint<\/a><\/h3>\n

Vue-Hint is a Vue.js plugin that wraps around Hint.css<\/a>. It features the v-hint-css<\/code> directive, enabling the addition of tooltips. This plugin retains the same options as Hint.css<\/strong>, allowing them to be added either as a JavaScript object or as Vue.js modifiers.<\/p>\n

\"Vue-Hint<\/figure>\n
\n

ReactJS Tooltips<\/h2>\n

React Joyride<\/a><\/h3>\n

React Joyride is a React component designed to display a series of tooltips that help new users navigate and familiarize themselves with your application<\/strong>.<\/p>\n

\"React<\/figure>\n

React Floater<\/a><\/h3>\n

React Floater wraps Popper.js into a React component, inheriting all its robust features. It enables the addition of tooltips and popups, and offers a playground for experimentation<\/strong> with the component through this sandbox<\/a>.<\/p>\n

\"React<\/figure>\n

React Autotip<\/a><\/h3>\n

React Autotip is a straightforward component that automatically adjusts the tooltip\u2019s position<\/strong> based on the surrounding available space, ensuring optimal visibility and placement.<\/p>\n

React Tippy<\/a><\/h3>\n

Built on Tippy.js and Popper.js, React Tippy introduces a Tooltip<\/code> component that easily integrates into React applications<\/strong>, enhancing their interactivity and user experience.<\/p>\n

\"React<\/figure>\n

React Hint<\/a><\/h3>\n

React Hint is an extension of Hint.css for React, adding several new features such as auto-positioning, delay settings, and Callback functions<\/strong>, further enhancing the tooltip\u2019s flexibility and functionality.<\/p>\n

\"React<\/figure>\n
\n

More Tooltip Scripts<\/h2>\n

Ember Tooltips<\/a><\/h3>\n

Ember Tooltips is an Ember.js component built on Popper.js, focusing on creating accessible tooltips. It is continuously evolving to ensure compliance with Accessibility standards, particularly in the area of 508 compliance.<\/p>\n

\"Ember<\/figure>\n

D3 Tip<\/a><\/h3>\n

D3 Tip is a plugin for D3.js, a JavaScript library known for its data visualization capabilities like charts, maps, and diagrams. This plugin enables the display of tooltips over these data visualizations, enhancing the interpretability of complex information.<\/p>\n

\"D3<\/figure>","protected":false},"excerpt":{"rendered":"

Tooltip elements are a fascinating user interface feature. They display a small box with information when your mouse cursor hovers over text or an image. These elements are crucial in enhancing the user experience, as they provide instant information without requiring any clicks. While the simplest method to add tooltips is through the <ACRONYM> or…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[507,4117,1057],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n40+ Tooltip Scripts in CSS, JavaScript, and jQuery - Hongkiat<\/title>\n<meta name=\"description\" content=\"Tooltip elements are a fascinating user interface feature. They display a small box with information when your mouse cursor hovers over text or an image.\" \/>\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\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"40+ Tooltip Scripts in CSS, JavaScript, and jQuery\" \/>\n<meta property=\"og:description\" content=\"Tooltip elements are a fascinating user interface feature. They display a small box with information when your mouse cursor hovers over text or an image.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/\" \/>\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=\"2018-06-19T15:01:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-30T15:16:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/balloon-css.gif\" \/>\n<meta name=\"author\" content=\"Hongkiat Lim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hongkiat Lim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\\\/\"},\"author\":{\"name\":\"Hongkiat Lim\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e3613a3bf757e4f67770f0b7a339edd0\"},\"headline\":\"40+ Tooltip Scripts in CSS, JavaScript, and jQuery\",\"datePublished\":\"2018-06-19T15:01:01+00:00\",\"dateModified\":\"2024-01-30T15:16:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\\\/\"},\"wordCount\":1784,\"commentCount\":47,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\\\/balloon-css.gif\",\"keywords\":[\"CSS\",\"Javascripts\",\"tooltips\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\\\/\",\"name\":\"40+ Tooltip Scripts in CSS, JavaScript, and jQuery - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\\\/balloon-css.gif\",\"datePublished\":\"2018-06-19T15:01:01+00:00\",\"dateModified\":\"2024-01-30T15:16:09+00:00\",\"description\":\"Tooltip elements are a fascinating user interface feature. They display a small box with information when your mouse cursor hovers over text or an image.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\\\/balloon-css.gif\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\\\/balloon-css.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"40+ Tooltip Scripts in CSS, JavaScript, and jQuery\"}]},{\"@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\\\/e3613a3bf757e4f67770f0b7a339edd0\",\"name\":\"Hongkiat Lim\",\"description\":\"Founder and Editor in Chief of Hongkiat.com. Hongkiat is also a designer, developer, entrepreneur, and an active investor in the US stock market.\",\"sameAs\":[\"http:\\\/\\\/www.hongkiat.com\\\/blog\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/hongkiat\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"40+ Tooltip Scripts in CSS, JavaScript, and jQuery - Hongkiat","description":"Tooltip elements are a fascinating user interface feature. They display a small box with information when your mouse cursor hovers over text or an image.","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\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/","og_locale":"en_US","og_type":"article","og_title":"40+ Tooltip Scripts in CSS, JavaScript, and jQuery","og_description":"Tooltip elements are a fascinating user interface feature. They display a small box with information when your mouse cursor hovers over text or an image.","og_url":"https:\/\/www.hongkiat.com\/blog\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-06-19T15:01:01+00:00","article_modified_time":"2024-01-30T15:16:09+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/balloon-css.gif","type":"","width":"","height":""}],"author":"Hongkiat Lim","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Hongkiat Lim","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/"},"author":{"name":"Hongkiat Lim","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e3613a3bf757e4f67770f0b7a339edd0"},"headline":"40+ Tooltip Scripts in CSS, JavaScript, and jQuery","datePublished":"2018-06-19T15:01:01+00:00","dateModified":"2024-01-30T15:16:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/"},"wordCount":1784,"commentCount":47,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/balloon-css.gif","keywords":["CSS","Javascripts","tooltips"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/","url":"https:\/\/www.hongkiat.com\/blog\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/","name":"40+ Tooltip Scripts in CSS, JavaScript, and jQuery - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/balloon-css.gif","datePublished":"2018-06-19T15:01:01+00:00","dateModified":"2024-01-30T15:16:09+00:00","description":"Tooltip elements are a fascinating user interface feature. They display a small box with information when your mouse cursor hovers over text or an image.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/balloon-css.gif","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/balloon-css.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"40+ Tooltip Scripts in CSS, JavaScript, and jQuery"}]},{"@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\/e3613a3bf757e4f67770f0b7a339edd0","name":"Hongkiat Lim","description":"Founder and Editor in Chief of Hongkiat.com. Hongkiat is also a designer, developer, entrepreneur, and an active investor in the US stock market.","sameAs":["http:\/\/www.hongkiat.com\/blog"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/hongkiat\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-K6","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/2858","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=2858"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/2858\/revisions"}],"predecessor-version":[{"id":71168,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/2858\/revisions\/71168"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=2858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=2858"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=2858"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=2858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}