Best jQuery Tooltip Plugins & Tutorials with Demo

offscreen.js : Detects if an Element falls of the Viewport

offscreen.js : Detects if an Element falls of the Viewport

jQuery plugin to detects if an element (tooltip) falls of the right/left/top/bottom side of your screen/viewport.Adds a class to all your elements with the defined selector that fall of the right/left/top/bottom side of the screen.

GGpopover.js : A jQuery Popover plugin

GGpopover.js : A jQuery Popover plugin

ggpopover.js – It’s a simple jQuery popover plugin extended from Twitter Bootstrap’s popover plugin that supports 4 positions, title background color, title font color, title border color, content background color, content text color, arrow color without using images.

  • 4 Positions: top, right, bottom and left.
  • Unlimited title background colors.
  • Unlimited title font colors.
  • Unlimited content background colors.
  • Unlimited content text colors.

Mousetip : jQuery Cursor Tooltips

Mousetip : jQuery Cursor Tooltips

Lightweight jQuery extension for creating cursor tooltips that follow mouse movement and position.

Simptip : CSS tooltip made with Sass

Simptip : CSS tooltip made with Sass

A simple CSS tooltip made with Sass. You can have a tooltip in different directions ( top , left , bottom , right ). You can also have a Tooltip in different color such as success , info , warning and danger. And finally other features like ( soft edge , half arrow , movable effect , fade effect , multiline tooltip ).

Video Lightning : jQuery Lightbox or Popover for Youtube & Vimeo videos

Video Lightning : jQuery Lightbox or Popover for Youtube & Vimeo videos

Turn any element into a lightbox or popover link for Youtube and Vimeo videos.Includes access to all embed API options for both providers as well as a healthy set of style options. Popovers are intelligently positioned and allow users to preview videos on hover.

Features:

  • Simple access to all embed API options for both providers
  • Lots of options to customize and beautify your lightboxes
  • Intelligent popover auto positioning gravitates to page center
  • Preview videos on hover, pin if you want them to stick around
  • Lazy loading of videos prevents slow page load due to video embeds
  • Rick Roll with ease (don’t pass video id, add rick_roll option to prevent closing)

GGtooltip.js : A jQuery Tooltip plugin

GGtooltip.js : A jQuery Tooltip plugin

It’s a simple jQuery tooltip plugin extended from Twitter Bootstrap’s tooltip plugin that supports 4 positions, background color, font color and border color without using images.

Features:

  • 4 Positions: top, right, bottom and left.
  • Unlimited background colors.
  • Unlimited font colors.
  • Different border color combinations based on background colors.
  • Supports different types of tooltip triggers such as click, hover, focus and manual.
  • Powered by HTML5, CSS3 and jQuery.

Annotator Pro : jQuery Image Tooltips & Zooming

Annotator Pro : jQuery Image Tooltips & Zooming

Annotator Pro comes with a fully featured editor that you can use to customize the plugin. Get instant previews and tweak the settings until it’s just right.If you image needs to have zooming, Annotator Pro deliveres incredibly natural, physics-based panning and zooming. No need to click buttons, just use your mouse.Give your users the option to take a closer look. With the editor you can enable fullscreen support for a fully immersive experience.

Tipso : jQuery Responsive Tooltip Plugin

Tipso : jQuery Responsive Tooltip Plugin

A Lightweight Responsive jQuery Tooltip Plugin.

Points of Interest with CSS3 & jQuery

Points of Interest with CSS3 & jQuery

Use this resource to highlight the points of interest of your products. Just a click to open a brief description of each point, allowing your user to get a deep and fast understanding of your product features.

jQuery Form Toolltip

jQuery Form Toolltip

This jQuery plugin allows you to add Tooltip calllout (with fadeIn fadeOut animation) to your form input controls.

  • You are able to specify the individual tooltip CSS
  • You are able to specify the fadeIn and fadeOut direction. Currently supporting Top, Bottom, Right and Left


Best jQuery websites design awards