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.

Interactive tooltip example from Balloon.css library
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.

Simptip tooltip customization example
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.

Hint.css library usage example on various websites
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.

Microtip CSS library for accessible tooltips
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.

Wenk tooltip library
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.

Tooltippy CSS library for stylish tooltips
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.

ElegantTips CSS library showcasing diverse tooltips
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.

Tootik tooltip library with GUI customization tool

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.

TippyJS features and customization options
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.

Darsain Tooltip compatibility and features
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.

Bubb advanced JavaScript tooltip library
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.

Popper library used in various applications
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.

YY Tooltip JavaScript-based library
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.

Position.js GUI and integration capabilities
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.

Bezet Tooltip with various positioning options
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.

MouseTip with cursor-following feature
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.

Internetips with dynamic cursor-following tooltips
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.

MTip compatible with various browsers
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.

Bubblesee simple and lightweight tooltip
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.

Tipfy's modern and compact tooltip design

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.

Tooltipster with extensive customization options
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.

Protip with diverse positioning and customization features
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.

PowerTip supporting keyboard navigation
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.

Accessible Aria Tooltip focusing on dialog box presentation
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.

TipsJS with Markdown-like formatting capabilities
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.

Dark Tooltip with confirm button and dimming feature
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.

Aria Tooltip with responsive and accessible design
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.

Toolbar.js featuring a functional toolbar in tooltips

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.

V-Tooltip in Vue.js
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-Directive-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.

Vue-Tippy integration with Tippy.js
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.

VueJS-Popover flexibility in Vue.js
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.

Vue-Hint incorporating Hint.css

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 Joyride for user guidance
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 Floater with Popper.js features
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 Tippy based on Tippy.js
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.

React Hint with extended features

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.

Ember Tooltips with accessibility focus
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.

D3 Tip for data visualization
WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail