16 Amazing jQuery Tooltips Collection

Posted by Lasantha Bandara on November 2nd, 2010 File Under : java script, jquery10 Comments

This will be a most wanted list of jQuery tooltips collection for every web designer.When you surfing the web you can see different types of tooltips effect in web sites.Here I listed more popular jQuery tooltips collection in these days.I hope to update this article with new tooltips effects in future.So bookmark this article for your future preference if you like this post.Use the links given below for the tutorials,demos and downloads.

The tooltip or infotip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small "hover box" with information about the item being hovered over.

jQuery (mb)Tooltip

Article : http://pupunzi.open-lab.com/2009/02/07/mbtooltip/

Demo : http://pupunzi.com/#mb.components/mb.tooltip/tooltip.html

Download: http://cloud.github.com/downloads/pupunzi/jquery.mb.tooltip/jquery.mb.tooltip.1.6.zip

qTip

qTip is a tooltip plugin for the jQuery framework. It's cross-browser, customizable and packed full of features!

Article : http://craigsworks.com/projects/qtip/

Demo : http://craigsworks.com/projects/qtip/demos/

Download: http://craigsworks.com/projects/qtip/download/

TipTip

Article : http://code.drewwilson.com/entry/tiptip-jquery-plugin

Demo : http://code.drewwilson.com/entry/tiptip-jquery-plugin

Download: http://www.drewwilson.com/upload/data/4/tipTipv13.zip

jQuery Tools

Article : http://flowplayer.org/tools/tooltip/index.html

Demo : http://flowplayer.org/tools/tooltip/index.html

Download: http://flowplayer.org/tools/img/tooltip/tooltip.zip

Simpletip

Article : http://craigsworks.com/projects/simpletip/

Demo : http://craigsworks.com/projects/simpletip/

Download: http://craigsworks.com/projects/simpletip/

JavaScript Kit Tooltip

Article : http://www.javascriptkit.com/script/script2/htmltooltip.shtml

Demo : http://www.javascriptkit.com/script/script2/htmltooltip.shtml

Download: http://www.javascriptkit.com/script/script2/htmltooltip.shtml

BeautyTips

BeautyTips is a simple-to-use balloon-help style tootip plugin. Any element on the page can be set to show a talk-balloon containing any text or HTML on hover, click, or any bindable event.

Article : http://plugins.jquery.com/project/bt

Demo : http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html

Download: http://plugins.jquery.com/project/bt

clueTip

The clueTip plugin allows you to easily show a fancy tooltip when the user's mouse hovers over (or, optionally, clicks on) any element you designate in your script. If the element includes a title attribute, its text becomes the heading of the clueTip.

Article : http://plugins.learningjquery.com/cluetip/

Demo : http://plugins.learningjquery.com/cluetip/demo/

Download: http://plugins.learningjquery.com/cluetip/#download

EZPZ Tooltip

Article : http://theezpzway.com/2009/3/17/jquery-plugin-ezpz-tooltip

Demo : http://theezpzway.com/demos/ezpz-tooltip

Download: http://theezpzway.com/2009/3/17/jquery-plugin-ezpz-tooltip#section-10

Hovertips

Article : http://www.dave-cohen.com/node/1186

Demo : http://www.dave-cohen.com/node/1186

Download: http://www.dave-cohen.com/modules/hovertip/hovertip.js

jQuery Awesomeness

Article : http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/

Demo : http://d2o0t5hpnwv4c1.cloudfront.net/234_tooltip/Demo/index.html

Download: http://d2o0t5hpnwv4c1.cloudfront.net/234_tooltip/Demo.zip

Tipsy Tooltip

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

Article : http://onehackoranother.com/projects/jquery/tipsy/

Demo : http://onehackoranother.com/projects/jquery/tipsy/#examples

Download: http://onehackoranother.com/projects/jquery/tipsy/#download

Popup Bubble

Article : http://www.dvq.co.nz/jquery/create-a-jquery-popup-bubble-effect/

Demo : http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/index.html

Download: http://www.dvq.co.nz/jquery/create-a-jquery-popup-bubble-effect/

jQuery Horizontal Tooltips Menu

Article : http://www.queness.com/post/556/jquery-horizontal-tooltips-menu-tutorials

Demo : http://www.queness.com/resources/html/tooltipmenu/index.html

Download: http://www.queness.com/resources/archives/jquery-tooltipmenu.zip

Coda Popup Bubbles

Article : http://jqueryfordesigners.com/coda-popup-bubbles/

Demo : http://jqueryfordesigners.com/demo/coda-bubble.html

Download: http://jqueryfordesigners.com/coda-popup-bubbles/

BetterTip

Article : http://edgarverle.com/BetterTip/default.cfm

Demo : http://edgarverle.com/BetterTip/default.cfm

Download: http://edgarverle.com/BetterTip/bettertip.zip

If there is a jQuery tool tip effect you like,but you can not add it to your website or blog yourself,you can contact me,I can do it for you.

File Under : java script, jquery

10 Responses to “16 Amazing jQuery Tooltips Collection”

  1. ChugyGogog says:

    Good source jquery tooltips...
    thanks for sharing informations.

  2. FRIENDS-PC says:

    thank share

  3. hamada says:

    thank you

  4. Chenk Rahman says:

    Thanks fren...
    Salam kenal, From: Chenk Rahman

  5. Beben says:

    I think there are more and more, if we talk about tooltips...hihihi
    nice list 🙂

  6. Admin says:

    ayye oyage blog eke theme 1ka SAM ayyagen gen illagannada? ayya epada, hada kiyanakam sam ayya inne... reply soon!!! thank you!!!

  7. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    @Admin

    Ok,if can give footer credits to me as the designer.

  8. bloggertipsseotricks.com says:

    A great list of jquery tool tips. nice work keep it up.
    Thanks!
    Best Regards!

  9. Sowmya says:

    Nice. Thanks for sharing.

  10. irwan says:

    cool of jquery tool tips. nice work keep it up.
    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.