Best jQuery Tooltip Plugins & Tutorials with Demo

jQuery MB balloon : Tooltip plugin

jQuery MB balloon : Tooltip plugin

jQuery mb balloon is a jQuery plug-in to add a balloon tip to any element; content can be a simple string, a DOM element or AJAX content.

Playful Little Tooltip Ideas with SVG & JavaScript

Playful Little Tooltip Ideas with SVG & JavaScript

Today we’d like to share a couple of simple tooltip animation ideas with you. The tooltips have different shapes mostly made of SVGs and we are animating them with anime.js. Some of these bouncy fellas use SVG path morphing, others transforms and one is a simple text effect.

infoBox : jQuery Tooltip style Plugin

infoBox : jQuery Tooltip style Plugin

infoBox is a tooltip style jQuery plugin to create information signs on your webpages which will show information boxes on mouseover. The created information boxes will resemble the conversation/message boxes. These boxes will be aligned perfectly without moving out of the page unless you specify a larger width for the box.

Wenk : Lightweight Pure CSS Tooltip

Wenk : Lightweight Pure CSS Tooltip

Wenk is a Lightweight tooltip available in pure CSS, cssnext using PostCSS, Less or SCSS. The minified version is just 701 bytes when gzipped. It can easily be styled using data-* attributes or classes. By default the tooltip will adjust to fit the content.

Toolgif : Simple jQuery GIF Tooltip Plugin

Toolgif : Simple jQuery GIF Tooltip Plugin

Toolgif is a lightweight and very simple jQuery gif tooltip plugin. Also there area some options for customize tooltip.

BootstrapX Clickover : jQuery Bootstrap Click Managed Popovers

BootstrapX Clickover : jQuery Bootstrap Click Managed Popovers

BootstrapX Clickover provides a Bootstrap extension to allow popovers to be opened and closed with clicks on elements instead of hover or focus.

naoTooltips : jQuery Tooltip Plugin

naoTooltips : jQuery Tooltip Plugin

Tooltips made with jQuery and css.This plugin is available with various options like position, speed and delay.

Target.js : JavaScript Library to make Images Interactive

Target.js : JavaScript Library to make Images Interactive

Target.js is a javascript library to choose targets elements and show the text who you want when the mouse hover the point.

ImageLinks : jQuery Interactive Image

ImageLinks : jQuery Interactive Image

ImageLinks is a lightweight solution for creation interactive images. With this plugin you are able to easily make an interactive image for your site that empowers publishers and bloggers to create more engaging content by adding rich media links to photos.

  • 2 Predefined Themes – included 2 skins (default & dark), you can create your own theme containing custom colors, fonts, and effects by starting with a built-in themes and changing its settings
  • CSS3 Animations – over 100+ CSS3 animations are available to give some stunning effects
  • Build with LESS – LESS and CSS files included
  • Cross-Browser – supports for all major browsers, including touch-screen devices and mobile devices

Tether : JavaScript library to make Absolutely Positioned Element

Tether : JavaScript library to make Absolutely Positioned Element

Tether 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 includes the ability to constrain the element within the viewport, its scroll parent, any other element on the page, or a fixed bounding box. When it exceeds those constraints it can be pinned to the edge, flip to the other side of its target, or hide itself.