17 Free Tooltip Libraries For Websites
Today we will go into the libraries to help you create tooltip functionality using HTML CSS Javascript for websites with many beautiful designs and effects!
What Is Tooltip?
Tooltip is an element that helps you annotate more information when the user hovers over an object somewhere on the site. In my opinion, it will help newcomers to the website to understand the function explicitly through such additional information. Usually it will show like title attribute in a tag but with 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 be flexible in using and extending tooltip functionality for HTML objects such as setting themes for tooltip, nesting tooltips, changing its display position… Setting up is also very simple you can install via npm, yard or use CDN to use directly for HTML page (It also has support library) support for React too). In addition, it also has detailed instructions on how to add or remove functions for program when applied to the website and examples for each specific case. An attribute I quite like It allows you to load content (can be images, text…) via AJAX when the user hovers over the object HTML icon.
Tipped
Tipped is an open link library built on javascript that allows you to create a tooltip with beautiful and responsive design on multiple device screens. It displays many types of information different information through supporting JSON, API, AJAX, JS… You can also flexibly edit the tooltip to suit match the website through additional functions such as color, size adjustment, display time tooltip…
POPPER
POPPER is a library written in javascript with a size of only about 3kB to help you improve the speed of the website while still retaining the functions that a tooltip needs. It is often used in letters Current popular libraries such as Bootstrap, Foundation, Material UI… In my opinion, it helps us to solve problems Solves a common problem in tooltips that determine the position of the element and render it as best as possible on the different device screens.
Hint.css
Hint.css is an open source Link library built with CSS with a size of only about 1.5kb. With Using CSS, you can apply it to many different types of web projects. And the setup is also very simple Simply download and then call the class with the function you want (This you can see the example in section demo please). Hint.css runs on all modern browsers and is responsive to multiple screens suffer now.
Microtip
Microtip is also a CSS based tooltip builder library and it’s 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 tooltip and applicable to many different types of projects, then I think this is the library that you should choose.
Tootik
Tootik is also a CSS library that makes it easy to create tooltips. You can set by many ways like npm, CDN, bower or download to use. You just need to call the data-tootik= . attribute "" in the HTML tag can create a tooltip immediately. Also if you want to set more For other features, the data-tootik-conf="" attribute can be used. In its demo page, we can add the properties we want and the corresponding code will be automatically output. So simple simple isn't it!
Intro.js
Intro.js is a javascript library that allows you to create tutorials about the functions or Things to keep in mind for users when they first visit our website. Because it’s a Link code open so you can use it for all different web projects. It’s also very light, only about 10kb with the file Javascript and 2.5kb with CSS file. In addition, it is also compatible with many current web browsers such as Google Chrome, Firefox, Opera…
Toolbar.js
Toolbar.Js is a jquery library that allows you to create a tooltip that displays bars tools easily. It includes many useful features such as allowing to choose the right color for the design web page, adjust the display position of the toolbars or allow adding motion effects with tooltip…
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 up or add features functionality via the data attribute in the HTML tag or using a class for the object.
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 a wallet. detailed example with corresponding code snippet. You just need to choose which tooltip suits you and paste it inside The program is ready to use. It will be called through the attribute in the HTML tag and the class inside that object. However, it also has the limitation that you cannot use it for self-closing tags such as <img>, <input>...
Tooltip
Tooltip is a library that helps you to display the tooltip anywhere in the object as shown above left, top right, bottom left, bottom right… You just need to download the file and call the desired location in the process The tooltip setter in Javascript is already able to determine how to display the tooltip for that object already. However, its limitation is that you have to download 4 files to your computer to use, including 3 js files and 1 css file.
Tipso
Tipso is a library built with Jquery that helps you create tooltips with many useful features. useful and beautiful. The requirement is to use Jquery on version 1.7. You easily add features by calling properties during tooltip setting such as text color, background color, title text, etc theme, display content via AJAX… What I like about it is the combination with the Animate.css makes it possible to create many beautiful motion effects for your tooltip.
Tooltip jBox
Protip
PowerTip
Simptip
D3-tip
Summary:
Through this, I hope the article will provide you with useful tooltip building libraries for development, web design and if you have any questions just send an email I will respond as soon as possible. I hope you Please continue to support the site so that I can write more good articles. Have a nice day!
Related Articles:
