40+ Tooltip Scripts in CSS, JavaScript, and jQuery
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 <TITLE> HTML tags, there are various impressive designs and styles achievable with JavaScript and CSS through tooltip scripts. Let’s explore some of these options.
CSS Tooltips
Balloon.css
Balloon.css is a CSS library built with Sass and LESS to create interactive tooltips. You can customize the tooltip’s content and position using the data- attribute. The tooltip can be positioned to the left, right, or both sides. Moreover, you can even include Emojis in your tooltip content. You can install Balloon.css via NPM or load it from CDNJS.
Simptip
Simptip is a Sass-based toolkit that allows for easy customization and recompilation to suit your specific needs. The position and content of the tooltip are adjustable through class names and the data-tooltip attribute. Simptip is available for download as an NPM, Yarn, or Bower package.
Hint.css
Hint.css is a widely-used CSS library for tooltip design, adopted by well-known websites like Fiverr, Webflow, and Tridiv. Unlike other CSS libraries, Hint.css utilizes the aria-label for accessibility, and its size and color can be customized using class names following the BEM methodology. Hint.css is available on NPM, Bower, and CDNJS.
Microtip
Microtip is an excellent CSS library designed with a focus on “Accessibility”. It employs the aria-label for tooltip content and the data- attribute to adjust tooltip size and positioning. 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.
Wenk
Wenk is a super lightweight CSS library, weighing just 733 bytes. It’s crafted in cutting-edge CSS using CSSNext, LESS, and SCSS, allowing for extensive customization and recompilation. You can download Wenk from NPM, Yarn, and access it via free CDN services like rawgit.com and unpkg.com.
Tooltippy
Tooltippy is another compact CSS library, 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. Detailed instructions for use and customization are available here.
ElegantTips
ElegantTips comes with a selection of pre-designed themes, easily modified using provided class names. This library is unique in that, unlike others that rely on HTML5 data- or aria-label, it requires an additional element to create the tooltip. This feature allows for including various content types within the tooltip, beyond just text.
Tootik
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. With Tootik, creating custom tooltips is as simple as copying and pasting the generated HTML code.
VanillaJS Tooltips
TippyJS
TippyJS, powered by Popper.js, is a robust JavaScript library that offers a wealth of customization options for tooltips. 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. These capabilities place TippyJS among the most powerful libraries for creating tooltips in JavaScript.
Darsain Tooltip
Darsain Tooltip provides a fundamental yet flexible tooltip implementation. It offers extensive configuration options and a set of class names to modify the tooltip’s appearance. This library is compatible with older browsers, including IE9, and can be adjusted for IE8 compatibility.
Bubb
Ideal for advanced JavaScript users, Bubb offers comprehensive APIs for more than just simple text display. Users can programmatically add complex HTML content to tooltips. The extensive capabilities of Bubb can be explored in its documentation and examples.
Popper
Popper is a sophisticated library designed for creating elements that “pop”, 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.
YY Tooltip
YY Tooltip stands out among its counterparts as it eliminates the need for HTML elements or attributes. 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.
Position.js
Position.js is another top-notch native JavaScript library for tooltips, offering a GUI for easy configuration and code generation. This library is highly compatible and can be used effectively with frameworks like React.js or Vue.js.
Bezet Tooltip
Bezet Tooltip provides 14 distinct options for tooltip display, such as on the right, left, bottom, and more. It smartly adjusts the tooltip’s position based on the available space around it. Explore its functionalities in the demo.
MouseTip
MouseTip is a JavaScript library that creates a tooltip which moves along with the cursor position. Uniquely, it configures the tooltip with a non-standard mousetip- attribute, differing from the typical HTML5 data- attribute. This library is conveniently available as an NPM module.
Internetips
Internetips offers a tooltip experience similar to MouseTip, with the tooltip tracking the cursor’s movement. 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.
MTip
MTip is a JavaScript tooltip library known for its excellent browser compatibility, including IE8. It’s fully customizable through various options and can be applied to any element, including an img tag. This flexibility makes it a versatile choice for web developers.
Bubblesee
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’s appearance. Explore its functionalities in the demo.
Tipfy
Tipfy, crafted with modern JavaScript ES6, is impressively compact at just 2 KB. The library offers two versions: tipfy.min.js for modern ES6 syntax, and tipfy.es5.min.js for compatibility with older browsers. It utilizes the data- attribute for customization, such as data-tipfy-side for tooltip direction and data-tipfy-text for tooltip content.
jQuery Tooltips
Tooltipster
Tooltipster is a jQuery library offering vast customization options such as theme, animation, touch support, content, open-and-close triggers, 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.
Protip
Protip, another comprehensive jQuery plugin, supports 49 positions, HTML content, icon support, custom callbacks, and more. It provides a user-friendly GUI for easy tooltip customization.
PowerTip
PowerTip is a jQuery plugin enriched with numerous options and APIs, giving developers various implementation methods. It supports keyboard navigation, allowing tooltips to appear when elements are navigated using the Tab key. Available as an NPM module, it’s compatible with RequireJS and Browserify.
Accessible Aria Tooltip
This jQuery plugin focuses on accessibility, presenting a dialog box with a title, multiline text, and a close button. It stands out for its unique approach to tooltip design.
TipsJS
TipsJS is a straightforward jQuery plugin with unique features. The tooltip content is set using a data-tooltip attribute, and the content can be formatted similarly to Markdown, using symbols like * for bold, ~ for italic, and ^ for headings.
Dark Tooltip
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 in the content. The demo page showcases its capabilities vividly.
Aria Tooltip
Aria Tooltip is a jQuery plugin compliant with WAI-ARIA 1.1, emphasizing accessibility. It’s responsive, offering different configurations for varying viewport sizes. Available as an NPM module under the name t-aria-tooltip, it’s a versatile choice for various applications.
Toolbar.js
Unlike typical tooltip plugins, Toolbar.js creates an interactive toolbar within the tooltip. 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.
VueJS Tooltips
V-Tooltip
V-Tooltip is a Vue.js component that leverages Popper.js. It introduces a new directive, v-tooltip, applicable to any element for creating tooltips. This directive can hold either the tooltip content or various options. Additionally, the v-popover component allows for embedding more complex content, such as Vue.js components or HTML, into tooltips.
Vue-Bulma Tooltip
Vue-Bulma Tooltip is a component of the Vue.js ecosystem, based on the Bulma UI Framework. As part of the Vue Bulma collection, this tooltip component is also available as a standalone NPM module named vue-bulma-tooltip, enhancing its usability in various projects.
Vue-Directive-Tooltip
Similar to V-Tooltip, Vue-Directive-Tooltip is another component based on Popper.js. It offers the same v-tooltip directive for tooltip creation, though it does not include the v-popover component found in V-Tooltip.
Vue-Tippy
Vue-Tippy integrates Tippy.js into Vue.js as a component. It features a custom directive, v-tippy, for adding tooltip content or options. Notably, it can render a custom Vue.js component inside the tooltip using the html option.
VueJS-Popover
VueJS-Popover is a custom Vue.js tool featuring a directive named v-popover and two components, <popover> and <tooltip>. This combination offers developers flexible ways to integrate tooltips into Vue.js applications.
Vue-Hint
Vue-Hint is a Vue.js plugin that wraps around Hint.css. It features the v-hint-css directive, enabling the addition of tooltips. This plugin retains the same options as Hint.css, allowing them to be added either as a JavaScript object or as Vue.js modifiers.
ReactJS Tooltips
React Joyride
React Joyride is a React component designed to display a series of tooltips that help new users navigate and familiarize themselves with your application.
React Floater
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 with the component through this sandbox.
React Autotip
React Autotip is a straightforward component that automatically adjusts the tooltip’s position based on the surrounding available space, ensuring optimal visibility and placement.
React Tippy
Built on Tippy.js and Popper.js, React Tippy introduces a Tooltip component that easily integrates into React applications, enhancing their interactivity and user experience.
React Hint
React Hint is an extension of Hint.css for React, adding several new features such as auto-positioning, delay settings, and Callback functions, further enhancing the tooltip’s flexibility and functionality.
More Tooltip Scripts
Ember Tooltips
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.
D3 Tip
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.
