17 Tooltip Libraries Free For Website

17 Tooltip Libraries Free For Website


November, 18 2021

Today we will learn about libraries that help you to create tooltip functionality using HTML CSS Javascript for websites with many beautiful designs and effects!

Tooltip Libraries For Website

Tooltip is an element that helps you annotate more information when the user hovers the mouse over an object in the web page. In my opinion, it will help new users of the website to understand the functions clearly through that additional information. Normally it will display like the title attribute in the a tag, but with the tooltip library, you can easily design a beautiful tooltip and add more functionality to your website.

Tippy.js

Tippy.js is a powerful library that helps us to create tooltips easily. You can flexibly use and extend the tooltip's functions to HTML element such as setting the tooltip theme, nesting tooltips, changing display position tooltip... You can install it via npm, yard or use CDN to use it directly for HTML pages (It also has a support library for React too). In addition, it also has detailed instructions examples on how to add or remove functions for the project when applied to the website. It allows load content (be it images, text...) via AJAX when the user hovers over the HTML element.

 Tooltip Tippy.js

Tippy.js

Tipped

Tipped is an open source library built on javascript for create a tooltip with a beautiful, responsive design on multiple device screens. It displays many different types of information for tooltip through supporting JSON, API, AJAX, JS... You can also flexibly edit the tooltip for element in website through additional functions such as colors, Adjust size, tooltip display time...

  Tipped

Tipped

POPPER

POPPER is a library written in javascript with a size only 3kB. So It helps you improve the speed of website while keeping the functions that a tooltip needs. It is often used in popular libraries such as Bootstrap, Foundation, Material UI... In my opinion, it helps us to solve the common problem in tooltip that is determining the position of the element, display tooltip on different device screens...

  POPPER

POPPER

Hint.css

Hint.css is an open source library built with CSS with a size only 1.5kb. With the use of CSS, so you can apply it to many different types of web projects. And the setup is also very simple, you just need to download and then call the class with the function you want (This you can see the example in the demo). Hint.css runs on all modern browsers and is responsive to today's device screens.

  Hint.css

Hint.css

Microtip

Microtip is also a CSS based tooltip builder library and it is only about 1kb in size. If you just need to create a pure, compact tooltip with a function that allows you to customize the display position of the tooltip and apply it to many different types of projects, then I think this is the library that you should choose.

 Microtip

Microtip

Tootik

Tootik is also a CSS library that makes it easy to create tooltips. You can set it up in many ways such as npm, CDN, bower or download it to your computer to use. You just need to call the data-tootik="" attribute in the HTML tag and it auto instantly create a tooltip. In addition, if you want to set up other features, we can use the data-tootik-conf="" attribute. In its demo page, we can add the properties we want and the corresponding code will be automatically output. It's simple, right!

 Tootik

Tootik

Intro.js

Intro.js is a javascript library that makes it possible to create tutorials about functions or things to keep in mind for users when they first visit our website. Because it is open source, you can use it for all different web projects. It is also very light, only about 10kb with Javascript files and 2.5kb with CSS files. In addition, it is also compatible with many current web browsers such as Google Chrome, Firefox, Opera...

 Intro.js

Intro.js

Toolbar.js

Toolbar.Js is a jquery library that makes it easy to create a tooltip that displays toolbars. It includes many useful features such as allowing to choose the right color for the website design, adjusting the display position of the toolbars or allowing to add animation effects with tooltip...

 Toolbar.Js

Toolbar.js

Wenk

Wenk is a compact library for displaying tooltips and can be used for CSS, LESS, SCSS... With a very small file size of about 733 bytes when compressed. You can easily set or add features through the data attribute in the HTML tag or using the class for element in HTML.

 Wenk

Wenk

Balloon.css

Balloon.css is a CSS library that contains all the features a tooltip needs such as position display, size, color, font size, add icon... What I like about it is that each feature will have detailed example with corresponding code snippet. You just need to choose which tooltip and paste it inside project. It will be called through the attribute in the HTML tag or the class element HTML. However, it also has the limitation that you cannot use it for self-closing tags such as <img>, <input>

 Balloon.css

Balloon.css

Tooltip

Tooltip is a library that helps you to display tooltip at any position in the element such as top left, top right, bottom left, bottom right... You just need to download the file and call the desired position in the process. setting the tooltip with Javascript is already able to determine how to display the tooltip for that object. However, its limitation is that you have to download 4 files to your computer to use, including 3 js files and 1 css file.

 Tooltip

Tooltip

Tipso

Tipso is a library built with Jquery that helps you create tooltips with many beautiful effect and many features. The requirement is use Jquery on version 1.7. You can easily add features by calling properties during setup tooltip in project such as text color, background color, title content, displaying content via AJAX... What I like about it is the combination with Animate.css library to help you create many beautiful animation effects for your tooltip.

 Tipso

Tipso

Tooltip jBox

 jBox

Tooltip jBox

Protip

  Protip

Protip

PowerTip

  PowerTip

PowerTip

Simptip

 Simptip

Simptip

D3-tip

 D3-tip

D3-tip

Related Articles:

Summary:

Through this, I hope the article will provide you more useful tooltip libraries for design and web development. If you have any questions just send an email I will respond as soon as possible. Please continue to support the site so that I can write more good articles. Have a nice day!