20+ Pretty powerful jQuery tooltip plugins

Wednesday, 06 May 2015
(10 votes)

The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over. Tooltips do not usually appear on mobile operating systems, because there is no cursor (though tooltips may be displayed when using a mouse).

The term tooltip originally came from older Microsoft applications (like Microsoft Word 95), which had a toolbar where moving the mouse over the buttons (the Toolbar icons) displayed these tooltips, a short description of the function of the tool in the toolbar.[citation needed] More recently, these tooltips are used in various parts of an interface, not only on toolbars. [...]

 

JQuery Tooltips

Multiple jQuery tooltip plugins coming in different flavors and providing easy implementation. These tools are ideal for guided tour pages on your websites and other similar...



Tipped.js: Complex Tooltip jQuery Plugin

Tipped.js: Complex Tooltip jQuery Plugin

Tipped.js is a plugin made with jQuery that allows you to easily create both simple and complex tooltips. The tooltips can include a wide range of elements like images, and texts in various sizes and weights. If you also use Scriptaculous, you can even add some nice effects to them. Source →


ImageMapster: Image Tooltip Enhancing jQuery Plugin

ImageMapster: Image Tooltip Enhancing jQuery Plugin

ImageMapsteris a plugin for jQuery that simplifies the process of guiding users to discover the features of a website. By defining the steps of the tour as an ordered list, the plugin displays desired information near any HTML element inside tooltips. Source →


Style My Tooltips: Lightweight jQuery Tooltip Plugin

Style My Tooltips: Lightweight jQuery Tooltip Plugin

A small in size (3kb unmodified) script to enhance the look of tooltips. It works just like browser’s native tooltips with few options and styling via CSS. By default, the script applies to any element with a title attribute like links, paragraphs, images etc. but you can easily set it to affect only specific classes. Source →


Opentip: Free JavaScript Tooltip Framework

Opentip: Free JavaScript Tooltip Framework

Opentip is a JavaScript tooltip framework. It’s free, open source and there are great styles built right into it, making it easy to create your own. The tooltips are drawn on canvas which creates beautifully rendered tooltips in all kinds of browsers. Source →


opentip-free-javascript-tooltip-framework.png

jQuery Website Tooltip Tour

A very nice jQuery script that allows you creating a site tour really easily. It works by adding classes (with a specific format) to the elements to be highlighted and then configuring them to display any custom text. The script can work manually by the user clicking prev-next links or totally automated in the pre-defined order. Tooltips displaying the information can also be customized as color, position and the duration they will be active. Source →


Simpletip: Easing Effect jQuery Tooltips

Simpletip: Easing Effect jQuery Tooltips

Simpletip is a jQuery plugin that 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. Source →


Colortip: Minimal jQuery Tooltip Plugin

Colortip: Minimal jQuery Tooltip Plugin

A simple jQuery tooltip plugin called Colortip that converts the title attributes of elements within your page, into a series of colorful tooltips. Six colors are available, so you can easily match them with the rest of your design. You can also easily create your own tooltip designs by just including three additional style classes to your stylesheet and adding an element to the supported colors array in Colortip. Source →


BeautyTips: jQuery Tooltips Plugin

BeautyTips: jQuery Tooltips Plugin

BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips (sometimes called “talk bubbles”) associated with an HTML element on the page. These tips are highly configurable, stylable and can be triggered in many different ways. Source →


QrTip: QR Code Tooltip jQuery Plugin

QrTip: QR Code Tooltip jQuery Plugin

qrTip is a simple script plugin made with jQuery that allows you to add QR code popups to your links. It’s free and easy to use, and to use it just include a style sheet and a JavaScript file to your web page. It is a project by Konstantin Kovshenin. Source →


ImgPreview: Link Preview Tooltip jQuery Plugin

ImgPreview: Link Preview Tooltip jQuery Plugin

The imgPreview jQuery plugin allows your users to preview an image before clicking on it, preloading the image so when a user does click through to it there is no waiting time. The image preview shows up in a tooltip-like box appearing alongside the user’s cursor when hovering over a link. The plugin is entirely unobtrusive; it does not require any hooks to target specific links and it will automatically detect the anchors that are linking to images and will only apply the preview effect to them. Source →


jQuery and CSS3 Simple Tooltip

jQuery and CSS3 Simple Tooltip

A jQuery and CSS3 Simple Tooltip works by popping up a bubble with more information about a word when you hover over it. You can even add an image to highlight the popped up info. The tooltip plugin is free and can be integrated easily. Source →


UniTip: Customizable Cross-browser Tooltip Script

UniTip: Customizable Cross-browser Tooltip Script

UniTip is an easy to implement & customize cross-browser tooltip script. The tooltip script is also lightweight & accepts HTML to be displayed. It uses transparent PNG’s for creating the tooltip balloon. The script does not rely on any JavaScript frameworks & can be applied to specific tags or classes. Source →


TipTip: Responsive jQuery Tooltip Plugin

TipTip: Responsive jQuery Tooltip Plugin

TipTip is a jQuery plugin that detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result, the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element. It is a very lightweight and intelligent custom tooltip jQuery plugin with no images and completely customizable via CSS. Source →


qTip: Advanced jQuery Tooltip Plugin

qTip: Advanced jQuery Tooltip Plugin

An advanced jQuery tooltip plugin built to be user-friendly, yet feature rich. It provides you with tons of features like rounded corners and speech bubble tips. Completely free under the MIT license. Source →


ggtooltip.js: jQuery Tooltip Plugin

ggtooltip.js: jQuery Tooltip Plugin

ggtooltip.js is a jQuery tooltip plugin extended from the Twitter Bootstrap plugin. It supports 4 positions, you can change the background color, the font color and the border. You can also set data attributes, integrate jQuery and more. It was created by gigagit. Source →


Tipso: Responsive Tooltips WordPress Plugin

Tipso: Responsive Tooltips WordPress Plugin

Tipso is a simple plugin for creating responsive tooltips. The resulting tooltips can be adapted into any mobile or desktop screen, animated and fully customizable for a determined hovered element. When you install it, you’ll see a button in the editor for adding the content easily. Then it just inserts the shortcode into the editor. It is a free plugin. Source →


PowerTip: jQuery Tooltips Plugin

PowerTip: jQuery Tooltips Plugin

A jQuery plugin that creates tooltips on hover. PowerTip features a very flexible design that is easy to customize, it gives you a number of different ways to use the tooltips, has APIs for developers, and supports adding complex data to tooltips. Source →


Tooltipster: Semantic Tooltips jQuery Plugin

Tooltipster: Semantic Tooltips jQuery Plugin

A powerful, flexible jQuery plugin that enables you to create semantic, modern tooltips enhanced with CSS quickly. In order for Tooltipster to work, you first need to add the .tooltip class (or whatever class / means of selection you’d like to use) to the element you wish to have a tooltip. Next, we’ll set the title attribute to whatever we’d like our tooltip to say. Source →


Tipsy: Facebook-like Tooltips Plugin

Tipsy: Facebook-like Tooltips Plugin

Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute. By default, tooltips will appear centred underneath their anchor, it can be arranged to manage tooltip positioning in any cardinal point. Source →


Grumble.js: Rotating jQuery Tooltips

Grumble.js: Rotating jQuery Tooltips

Originally written for Huddle.com, grumble.js provides individual tooltips without the usual limitations of cardinal positioning. A grumble can be rotated around a given element at any angle, all 360 degrees; any distance can be specified, and any CSS style can be applied. Source →


qTip2: Advanced jQuery Tooltip Plugin

qTip2: Advanced jQuery Tooltip Plugin

qTip2 is the second generation of the advanced qTip plugin that takes advantage of the power of jQuery. It provides you with tons of features like speech bubble tips and image map support, and best of all, it is open source and free to use, released under the MIT and GPLv2 licenses. Source →


Poshy: jQuery Tooltip Plugin

Poshy: jQuery Tooltip Plugin

This jQuery plugin makes the default browser tooltip that displays the value of the title attribute, convert into a slightly different but improved version. You can apply styles to it, make content load asynchronously, trigger the tooltip manually, and many more options to have fun with. Source →


Sweet Tooltip: jQuery & CSS3 Plugin

Sweet Tooltip: jQuery & CSS3 Plugin

Sweet Tooltip is a jQuery & CSS3-based tooltip, not merely a one-style tooltip, but seven. These imageless tooltips are crafted using CSS power, linear-gradient, box-shadow, text-shadow, :after and :before selectors, among many others. Source →


sweet-tooltip-jquery-css3-plugin.jpg

sweet-tooltip-jquery-css3-plugin.jpg

jquery.tooltip.js is a cool tooltip plugin with default states for positioning. It can be positioned on top, bottom, left and right, and It is also ready for mobile! Source →


Akita: Speech Bubble jQuery Plugin

Akita: Speech Bubble jQuery Plugin

Akita is a light-weight and customizable jQuery plugin that helps web developers create smarter tooltips easily and efficiently. It requires jQuery and is released under the open source license MIT. Anyone can modify and use it without any restriction. Source →


tooltipsy: jQuery Tooltip Plugin

tooltipsy: jQuery Tooltip Plugin

Tooltipsy is a jQuery tooltip plugin that was created to provide extremely efficient tooltip functionality; it gives you complete control over the CSS, animation, and position. It is free. Source →


Zebra: Lightweight Tooltip jQuery Plugin

Zebra: Lightweight Tooltip jQuery Plugin

Zebra_Tooltips is a lightweight jQuery plugin (around 5KB minified, 1.6KB gzipped) for creating simple but smart and visually attractive tooltips featuring nice transitions and offering a wide range of options for configuration. It is free. Source →

Tooltipify: Stylable jQuery Tooltip Plugin

Tooltipify: Stylable jQuery Tooltip Plugin

The tooltipify plugin creates a slide in, stylable tooltip to replace the default browser tooltip. The latest version has display awareness and also responds to the window resize event. This plugin also supports HTML content by using the content property. Source →


That's all :)

Also see:

30+ cool and useful jQuery and JavaScript effects and animations #1

List of jQuery menus for Web Developers #1

JQuery SVG Libraries to add animations and conceive interactive experiences

Ebook: Learn How to Code in HTML5 & CSS3

10 Cool and Useful Premium JavaScript Plugins for your next projects


Altin Groups IT Solution Center

Is it not a great idea to follow me to be recieve my last posts? Follow me now!


6410 times

Wednesday, 06 May 2015

Ibrahim Jabbari

I am Ibrahim Jabbari Web Designer / Developer since 2006, This is my blog, I'll share my experiences, Useful resources and all update news from IT world with you all, I hope you enjoy surfing my blog. Connect with me on Facebook, Twitter and and Instagram.

www.ibrahimjabbari.com