Best jQuery Tooltip Plugins & Tutorials with Demo

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

Airview : jQuery Bootstrap Image Tooltip

Airview : jQuery Bootstrap Image Tooltip

Airview is a Javascript plugin which displays single image as Bootstrap Tooltip. It requires Bootstraps Tooltip.js and JQuery.js to work, both of these plugins are provided.

Tooltip Styles Inspiration with CSS3 & SVG

Tooltip Styles Inspiration with CSS3 & SVG

A small collection of various hover tooltip styles and effects for your inspiration. Using CSS transforms, border-radius and SVG shapes we can create modern looking and interesting tooltips.

Tooltips are normally used for providing some kind of extra information and they can be found in almost every website. Those tiny little helpers offer a great opportunity to add some subtle and unique effects to any design. So today we want to show you some possibilities of showing those elements in style. We only use CSS transitions via hover and also some SVGs to create unique shapes.



Best jQuery websites design awards