Though the simplest way to add tooltips to your text is to use HTML tag
Read Also: 50+ Nice Clean CSS Tab-Based Navigation Scripts
Balloon.css – Balloon is CSS library composed with SasS and LESS to show an interactive tooltip. The content and the position of the tooltip are configurable through the
data- attribute. You can show the tooltip at the left, right or the left-right. You can even add Emojis to the content. Balloon.css can be installed through NPM and or load it from CDNJS.
Simptip – Made with SasS enabling to reconfigure and recompile the code to fit your requirement. The tooltip position and content is configurable through the class name and the
data-tooltip attribute. Simptip is available as an NPM, Yarn, and Bower package.
Hint.css – One of the popular CSS libraries to display tooltip, Hint.css is used by many popular websites like Fiverr, Webflow, and Tridiv. Unlike the other two CSS libraries, Hint.css uses
aria-label You can configure the size and color through the class names using BEM methodology. Hint.css is available on NPM, Bower, and CDNJS.
Microtip – Another awesome CSS library for creating tooltip built with “Accessibility” in mind, Microtip uses
aria-label to hold the tooltip content and
data- attribute to configure the tooltip size and position.
It uses CSS variable which allows you to customize the tooltip with just plain ol’ CSS file. CSS Variables are already supported in many web and mobile browsers. Microtip is available as an NPM, Yarn package, and UNPkg CDN.
Wenk – It’s just 733 bytes. A super lightweight library written in a super-modern CSS using CSSNext, LESS, and SCSS so can customize and recompile the styles the way you like. Wenk can be downloaded from NPM, Yarn, and the following free CDN services: rawgit.com and unpkg.com.
Tooltippy – Another lightweight CSS library being just around 1 KB in size. Tooltippy includes several pre-made themes for styling the tooltip. It’s written with a CSS pre-processors named Stylus. See the instruction on how you can extend or customize these themes.
ElegantTips – This library comes with a few pre-built themes that can be changed with the class names provided. Unlike the other the libraries which rely on HTML5
data- or the
aria-label attribute, ElegantTips requires an extra element added to form the tooltip. This allows you to add literally any content to the tooltip beyond simple text.
Tootik – Not only that this CSS library provides the stylsheet in CSS, LESS, and SasS format, it also provides an easy-to-use GUI to customize the tooltip. You can simply copy and paste the HTML generated by this tool. It’s that simple.
Darsain Tooltip – This library provides the basic implementation of a tooltip. Still, it provides extensive options to configure the tootip behaviour, and a set of class names to change the tooltip appearance. The tooltip works well in older browser like IE9 and, if needed, IE8 with a few adjustments.
Popper – Contains a technical abstraction to create something that “pops”, like a tooltip, a popover, and drop-downs. TippyJS uses it as the library foundation and is used by big names on the web such as Bootstrap, Microsoft, and Atlassian.
Bezet Tooltip – This library provides 14 options to display the tooltip; such as on the
bottom-center, etc. On top of that, it also smart enough that it could adjust the tooltip position based on the available space surrounding the tooltip. Check out the demo.
MouseTip – This JavaScrtipt library will create a tooltip that’ll move along the cursor position. The tooltip is configured with a non-standard
mousetip- attribute instead of using the HTML5
data- attribute. Mousetip is available as an NPM module.
img (an image element).
tipfy.min.js providing the script with modern ES6 syntax, and
tipfy.es5.min.js if you need compatibility with older browsers. It uses
data- attribute to customize the tooltip; the
data-tipfy-side, for example, is used to set the tooltip direction, and use
data-tipfy-text attribute to add the tooltip content.
Tooltipster – This library provides extensive options to customize almost anything such as the theme, animation, touch-support, content, open-and-close trigger, etc. It also provides custom event listener and callbacks allowing developers to extend the tooltip with custom functions. Also, being a jQuery plugin, the tooltip would work in older browser like IE6 depending on the jQuery version being used.
Protip – Another extensive jQuery plugin, Protip supports 49 positions, HTML for the tooltip content, icon support, custom callbacks, and a lot more. Protip provides a GUI allowing you to customize the tooltip with ease.
PowerTip – This jQuery plugin also brings Options and APIs providing developers a number of different ways to implement the tooltips. It supports keyboard navigation; making the popup appear when navigating elements with the Tab keyboard. PowereTip is available as an NPM module. It can be used with RequireJS and Browserify.
Accessible Aria Tooltip – A jQuery plugin with Accessibility feature built-in, the tooltip is designed to display a dialog box with a title, multiline of text, and a close button. It is one of its own on our list.
TipsJS – A simple jQuery plugin, yet it brings quite distinctive features. The tooltip content is set with a
data-tooltip attribute. What’s more is that we can also wrap the content with special characters to format the content similar to Markdown formatting. We can use
* to make the content bold,
~ for italic, and
^ for heading.
Dark Tooltip – This library provides some really useful features to power up the tooltip. For example, we can add a confirm button — Yes and No, dim the background while the tooltip is displayed, and add HTML elements to the content. I think you really should check out the demo page.
Aria Tooltip – Another tooltip with built-in Accessibility feature, this jQuery plugin is WAI-ARIA 1.1 compliant. It is responsive in a way that you can provide different configurations for different viewport sizes. Aria Tooltip is available as an NPM module named
Toolbar.js – While the other jQuery plugin may only show simple text or HTML content within a tooltip, this jQuery plugin creates a toolbar. The tooltip would contain two or more links with an icon that’ll typically perform an action on click, like any toolbar. Check out the documentation and examples.
V-Tooltip – V-Tooltip is a Vue.js component powered by Popper.js under the hood. It provides a new directive named
v-tooltip which can be added to any element to create a tooltip. The
v-tooltip may contain the tooltip content or the Options. Aside from the custom
v-tooltip directive, you can also add the tooltip with the
v-popover component. With this component, you can add more complex content into the tooltip with Vue.js component or HTML.
Vue-Bulma Tooltip – A Vue.js component to create tooltip based on the Bulma UI Framework. This library is part the component of Vue Bulma. But, the tooltip component is available as an NPM module named
vue-bulma-tooltip that you can use this as standalone components.
Vue-Directive-Tooltip – Overall it’s similar to V-Tooltip component based on Popper.js and provides the same directive called
v-tooltip. However, it does not seem to provide the
Vue-Tippy – This library wraps Tippy.js into a Vue.js component. It features a custom Vue.js directive called
v-tippy that works like an HTML attribute; we can add content for tooltip or the options to customize it. It also renders a custom Vue.js component on the tooltip content using the
VueJS-Popover – A custom Vue.js with a custom directive called
v-popover and two custom components namely
<tooltip> providing flexibility for developers to add tooltips in Vue.js application.
Vue-Hint – A Vue.js plugin that wraps Hint.css. The plugin features
React Joyride – A React component to display a set of tooltips that’ll guide new users to get familiar with your new application.
React Floater – This library wraps Popper.js into a React component named Floater, so it has the same great features as Floater’s. You can add tooltip and popup, and you can also play around with this component through this sandbox.
React Autotip – A simple React component with the auto-positioning feature, eact Autotip will automatically adjust the position of the tooltip when the available space around it changes.
React Tippy – Built on top of Tippy.js and Popover.js. This library introduces a
Tooltip component that you can include in your React application.
React Hint – A React component extending Hint.css. The components add a few features that are not available in Hint.css such as auto-position, delay, and a Callback function.
Ember Tooltips – An Ember.js component for creating tooltips, it is built on top of Popper.js. The component is also designed with Accessibility in mind and keeps improving to comply with around 508 complience on this matter.