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 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.
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.
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.
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!
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...
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.
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
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.
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!