35 Useful jQuery Tooltip Plugins & Tutorials

Here are 35 jquery plugins & tutorials allow you to easily create beautiful tooltips using the jQuery Javascript library.

Annotator Pro

Easy annotations, tooltips and zooming for your photos and images. It 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.

annotator-pro

Toolgif

A very simple Jquery gif tooltip plugin.

toolgif

jqEasytooltip

jqEasytooltip is an easy and customizable jquery plugin, built in css3 and well-designed javascript. Easy to use and customize for newbies, and strong for advanced users.

jqeasytooltip

PowerTip

PowerTip 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

Toolbar.Js

Toolbar allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using the twitter bootstrap icons and provides flexability around the toolbars display and number of icons.

toolbar

Tipso

A Lightweight Responsive jQuery Tooltip Plugin.

tipso

Lite Tooltip

It is best jQuery tooltip plugins ! It’s a lightweight JQuery tooltip plugin that supports 12 positions, multiple background shades, videos, image map areas, image hotspots and menus with responsive appearance on the web pages.

tooltip-jq

Elegant CSS and jQuery Tooltip: Responsive, Mobile-Friendly

It’s responsive. It relies on a maximum width value when viewed on large screens, adopts to narrow environments and picks the best viewable position relatively to the target.

jquery-tooltip-31

tipsy

Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.

jquery-tooltip-32

Simple Tooltip for Huge Number of Elements

If you are looking for jQuery plugins that can handle 2000 links on a page, this plugin is for you.

tooltip-jquery-34

Facebook Tooltip HTML and CSS

Facebook recently implemented a new, lighter tooltip. I say the tooltip is lighter because it seems a lot quicker and more elegant than their previous effort.

tooltip-jquery-35

Building an Elegant Tooltip Dropdown Menu Powered by jQuery

This tutorial gone into depth over the process for creating a fantastic navigation menu with tooltips. Each is dynamically generated to hold a small bit of information about the currently targeted link.

Building an Elegant Tooltip Dropdown Menu Powered by jQuery

tooltipsy

Introducing a jQuery tooltip plugin for control-obsessed designers.

tooltipsy

Tipped

Tipped allows you to easily create beautiful tooltips using the jQuery Javascript library.

Tipped

How to Create Link Tooltips Using CSS3 and JQuery

A script-enhanced version that’s SEO friendly and used a little jQuery magic to make it animate itself to the mouse position!

How to Create Link Tooltips Using CSS3 and JQuery

Poshy Tip jQuery Plugin

The default browser tooltip that displays the value of the title attribute is replaced with a “poshier” version.

Poshy Tip jQuery Plugin

SimpleTip

Simpletip is a plugin for the popular jQuery JavaScript library. It allows you to create tooltips with ease on any element on the page using the power of jQuery’s selectors and event management. The tooltips can be static, dynamic, or even loaded through AJAX with a variety of different visual effects.

SimpleTip

Simple Tooltip Powered by jQuery

The web has a lot to learn from video game interfaces. Adding tooltips is an effective way to quickly bring users up to speed so that they never feel the need to find the help manual.

Simple Tooltip Powered by jQuery

jTip Tooltip Plugin

Tool tip will flip horizontally depending upon the space between the tool tip and the right side of the window. Don’t worry the script also accounts for the custom widths.

jTip Tooltip Plugin

Coda Popup Bubbles

The biggest trick to be wary of is: when you move the mouse over the popup, this triggers a mouseout on the image used to trigger the popup being shown.

Coda Popup Bubbles

Easiest Tooltip and Image Preview with jQuery

What this script does is adds an element to the body when you roll over a certain object. That element’s appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly.

Easiest Tooltip and Image Preview with jQuery

Latest Tweets Tooltip with jQuery

If you have a news website, it might be interesting for you to allow your users to see the latests tweets about a topic. Here is a jQuery plugin for showing the latest tweets about a certain word or phrase.

tooltip-jquery-33

Build a Better Tooltip with jQuery Awesomeness

Tutorial to show you how to quickly write a jQuery plugin that will replace the typical browser tooltip with something a little flashier.

Build a Better Tooltip with jQuery Awesomeness

qTip Tooltip Plugin

qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework.

qTip Tooltip Plugin

Colortip – a jQuery Tooltip Plugin

In this tutorial we are going to write a simple jQuery tooltip plugin. It is going to convert the title attributes of elements withing your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design.

Colortip – a jQuery Tooltip Plugin

Create a Speech-Bubble Tooltip using CSS3 and jQuery

Create a very lightweight and good looking tooltip without using any images.

Create a Speech-Bubble Tooltip using CSS3 and jQuery

0 Comments

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.