20 Awesome Javascript & CSS Tooltip Libraries

A tooltip is small pop-up text that is displayed when a user positions the cursor over HTML elements. Tooltips are useful to show some additional information. Input fields in web forms are a perfect example of such a situation. So in this post we`ve gathered 20 awesome libraries for implementing great looking tooltips using CSS and Javascript.

Floating Ui

A low-level toolkit to create floating elements. Tooltips, popovers, dropdowns, and more.

Floating Ui

Tooltip Sequence

A simple step by step tooltip helper for any site.

Tooltip Sequence

Annotator Pro

Easy image annotations, tooltips and zooming.

Annotator Pro - Image Tooltips & Zooming

Popper.js

It is a positioning engine, its purpose is to calculate the position of an element to make it possible to position it near a given reference element.

Popper.js

Tether

It is a JavaScript library for efficiently making an absolutely positioned element stay next to another element on the page. For example, you might want a tooltip or dialog to open, and remain, next to the relevant item on the page.

Tether

Hint.css

It is written as a pure CSS resource using which you can create cool accessible tooltips for your web app.

Hint.css

Tippy.js

It is a highly customizable vanilla JS tooltip and popover library powered by Popper.js.

Tippy.js

jBox

It is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more

jBox

React Popper

React wrapper around Popper.js.

React Popper

html5tooltips.js

Tooltips, written in pure JavaScript, with smooth 3D animation implemented in CSS. No framework required.

html5tooltips.js

PowerTip

It features a very flexible design that is easy to customize, gives you a number of different ways to use the tooltips, has APIs for developers, and supports adding complex data to tooltips. It is being actively developed and maintained, and provides a very fluid user experience.

PowerTip

grumble.js

A grumble can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified. Any CSS style can be applied. There’s auto-magic size adjustment for use with localised text. FX queues for animating multiple grumbles. And it works in IE6+, and modern browsers.

grumble.js

Microtip

A modern, elegant and minimal, css only tooltip library.

microtip

v-tooltip

Easy tooltips, popovers and dropdown with Popper.js.

v-tooltip

Wenk

It is a Lightweight tooltip available in pure CSS, cssnext using PostCSS, Less or SCSS.

Wenk

Tootik

A pure CSS/SCSS/LESS Tooltip library. Super easy to use, No JavaScript required.

Tootik

d3.tip

This javascript library provides tooltips for d3.js visualizations such as bar charts. The tooltips show value at the selection and label for the unit. They can be styled, shown, hidden, positioned and updated.

d3.tip

Reactjs-Popup

It is a simple react popup component with a lot of benefits.

Reactjs-Popup

jsPanel

A JavaScript library to create highly configurable floating panels, modals, tooltips, hints/notifiers/alerts or contextmenus for use in backend solutions and other web applications.

jsPanel

Tlite

This is a JavaScript tooltip library with 0 dependencies that aims to be as small as possible without skimping on key features. It currently weighs in at less than 650 bytes when minified and gzipped.

Tlite

Zebra

It is a lightweight jQuery tooltips plugin for creating simple but smart and visually attractive tooltips, featuring nice transitions, 4 themes, and offering a wide range of configuration options.

Zebra tooltip

Pure JS MouseTip

A pure javascript solution for creating tooltips that follow your mouse.

Pure JS MouseTip

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.