An interesting UI element, tooltips (also called infotips) make a small box appear when the mouse cursor is hovered over a certain text or image with information regarding the element being hovered over. In terms of user experience, tooltips provide users the quickest and easiest source of information without having to click anything.

Though the simplest way to add tooltips to your text is to use HTML tag <ACRONYM> or TITLE=””, ALT=””. However, there are some really cool tooltips designs and styles you can create with JavaScript and CSS using tooltips scripts. Let’s take a look.

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.

TippyJS – Powered by Popper.js, TippyJS comes with an abundance of options to configure the tooltip. We can customize the animations, the tooltip arrow, the width, the size, the theme, and a lot more. It also provides Callback functions with which you can execute a function when the tooltip is shown and hidden. These features make TippyJS one of our powerful JavaScript libraries on our list to create tooltip.

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.

Bubb – Bubb might be well-suited for advanced JavaScript users. Using its extensive APIs, aside from displaying simple text, you can programmatically add a more complex HTML content to the tooltip. It’s pretty cool; you can refer to the Docs the examples.

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.

YY Tooltip – Unlike the other libraries, YY Tooltip does not require you to add an HTML element or attributes. It works fully with JavaScript and the content, position, and colors, are defined in an Object instead of in an HTML element. It’s perfect to be used in conjunction with a full JavaScript web application.

Position.js – Another excellent native JavaScript library to create tooltips, Position.js provides a GUI to configure the function and simply copy and paste the code generated there. Position.js can be used in conjunction with React.js or Vue.js.

Bezet Tooltip – This library provides 14 options to display the tooltip; such as on the right, left, bottom, left-center, right-end, 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.

Internetips – Quite similar to MousetTip, the tooltip generated by this library follows the cursor position. Everything is configured through the JavaScript Object instead of HTML and the attributes are also built for modern browsers. It’s lightweight and fast.

MTip – A JavaScript library for Tooltip with great browser compatibility. It’s compatible with IE8, fully customizable through the Options, and you can add the Tooltip to any element even on an img (an image element).

Bubblesee – a lightweight JavaScript library that provides a straightforward functionality of a “tooltip”. It’s easy to use JavaScript library without complicated options to customize the output. A Sass file is provided if you’d like to change the tooltip appearance. Check out the demo.

Tipfy – Built with the modern JavaScript syntax, ES6, Tipfy is just 2 KB in size. The library provides two version of files: 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 t-aria-tooltip.

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 v-popover component.

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 html option.

VueJS-Popover – A custom Vue.js with a custom directive called v-popover and two custom components namely <popover> and <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 v-hint-css directive to add the tooltip. It brings the same set of options as Hint.css, so you can add them as a JavaScript object or Vue.js modifier.

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.

D3 Tip – a D3.js plugin. D3.js is a JavaScript library for data visualization like charts, maps, diagrams, etc. This plugin allows you to show tooltip on top of these data.

The post 40+ Useful Tooltips Scripts with CSS, JavaScript, and jQuery appeared first on Hongkiat.