Tooltip creation tools are useful with CSS

As an interesting UI element, tooltips (also known as infotips) make a small box appear when hovering over a text or image with information related to the component moved by the mouse. In terms of user experience, tooltips provide users with the quickest and easiest way to source information without having to click on anything.

The easiest way to add tooltips to your text is to use HTML tags or TITLE = '', ALT = '' . However, there are some really interesting tooltip designs and designs that you can create with CSS using the tooltip script. Let's find out through the following article!

Balloon.css

Balloon is a CSS library created by SasS and LESS to display an interactive tooltip. The content and location of tooltip is configured via the data- attribute. You can display tooltip on the left or right. You can even add Emoji (emoticons) to the content. Balloon.css can be installed via NPM or downloaded from CDNJS.

Simptip

Simptip is created using SasS, allowing reconfiguration and recompilation of the code to suit your requirements. The position and content of tooltip can be configured via class name and data-tooltip attribute. Simptip is available in NPM, Yarn and Bower packages.

Hint.css

As one of the popular CSS libraries for displaying tooltip, Hint.css is used by many popular websites like Fiverr, Webflow and Tridiv. Unlike two other CSS libraries, Hint.css uses aria-label. You can configure size and color through class names by BEM method. Hint.css is available on NPM, Bower and CDNJS.

Microtip

Another great CSS library for creating tooltip, built with the " Accessibility " feature, Microtip uses aria-label to keep the tooltip content and data properties to configure the tooltip's size and location.

It uses CSS variables to allow you to customize tooltip with only CSS files. CSS variables have been supported in many web browsers and mobile devices browsers. Microtip is available in packages of NPM, Yarn and CDN UNPkg.

Wenk

Its capacity is only 733 bytes. This is a super light library written with a super modern CSS using CSSNext, LESS and SCSS to be able to customize and recompile the styles you want. Wenk can be downloaded from NPM, Yarn and the following free CDN services: rawgit.com and unpkg.com .

Tooltippy

Another very light CSS library is only about 1KB in size. Tooltippy includes a number of built-in themes for styling tooltip. It is written in a CSS preprocessor called Stylus.

ElegantTips

This library comes with a few built-in themes that can be changed with the class name provided. Unlike other HTML5 data- or aria-label , ElegantTips properties require additional elements to create the tooltip. This allows you to add literally any content to the tooltip in addition to simple text.

Tootik

This CSS library not only provides CSS, LESS and SasS format tables, but also provides an easy-to-use GUI to customize the tooltip. You can simply copy and paste the HTML created by this tool. Very simple!

See more:

1. Tooltip creation tools are useful for jQuery
2. Tooltip creation tools are useful with VanillaJS
3. Tooltip creation tools are useful with VueJS