30 Stylish jQuery Tooltip Plugins For Catchy Designs

 Posted in Coding Freebies 848 days ago • Written by: Peteris Kelle
  • Buffer
  • Pin It
  •  71

Tooltips on website are small things which can play a big role in website design. If a tooltip on your website is very well made and looks amazing then it can lift up visitors impression about your website. And that’s why here comes jQuery to help with its well made tooltips. And remember that all those small website design things make your website look better.

So this time I will show you my Top 30 of jQuery tooltip plugins. Enjoy!

preview stylish jquery tooltip plugins catchy designs js ajax freebies css

1. The Tooltip

The Tooltip is a good looking tooltip that appears when you mouseover a tooltip handle. It’s not jQuery plugin, but CSS3 code, but it has cool animation and is very handy, view preview video on site to see how powerful it is!
Benefits:

  • CSS3 fade in and fade out gives The Tooltip a smooth appearance (works in modern Webkit browsers, Firefox 4.0, Opera 11)
  • Gracefully degrades in older browsers
  • 25 awesome color schemes included
  • Good documentation and examples (as seen in the video preview) are present
  • You can use The Tooltip as a regular speech bubble too
  • No images, no JavaScript, less load time

banner js ajax freebies css

1.1. Dynamic tooltip

Very cool tooltip! It’s very well made because it consists of cool transition effects and it also has a transparency and a drop shadow effect.

flowplayer-dynamic-tooltip-jquery-tooltip-plugin-for-web-design

2. Popup Bubble

Brilliant tooltip! It looks so simple but it has awesome transition effects. This tooltip could be very useful for clean and simple websites.

dvq-popup-bubble-jquery-tooltip-plugin-for-web-design

3. jQuery Horizontal Tooltips Menu Tutorials

Beautifully made tooltip! This tooltip never disappears but follows when you hover over other links. Such a simple looking tooltip but its animation is brilliant.

queness-horizontal-tooltips-menu-tutorials-jquery-tooltip-plugin-for-web-design

4. Coda Popup Bubble

Very nice tooltip with cool transition effect and it also has a drop shadow.

jqueryfordesigners-coda-popup-bubble-jquery-tooltip-plugin-for-web-design

Fresh Tooltips

Precisely designed and coded Fresh Tooltips. Great for any kind of website, very practical. The top one is 100% transparent black, which looks very very cool. Also perfect for learning—I’ve made lots of cross-browser research before I’ve done these, you won’t find better tutorial with such an amazing design than personally going through my code.

5. Awesomeness

Cool tooltip with nice transition effect and cool transparent border around it.

nettuts-s3-cdn-plus-awesomeness-jquery-tooltip-plugin-for-web-design

6. TipTip

Beautifully made tooltip with fade in / out transition effects, transparency and drop shadow effect.

code-drewwilson-tiptip-jquery-tooltip-plugin-for-web-design

7. (mb)Tooltip

Beautifully made tooltip with nice transition for input fields.

pupunzi-mb-tooltip-jquery-tooltip-plugin-for-web-design

8. vTip

Simple but well made tooltip with a fade in transition effect. It has a cool looking border around it and when this tooltip appears, it also follows your mouse.

vertigo-project-vtip-jquery-tooltip-plugin-for-web-design

9. jGrowl

Cool tooltip which appears when you click on the link and then it sticks on the right-top corner of your window, and disappears after some time or when you close it manually by clicking on the close button. It also has fade in / out transition effects.

stanlemon-jgrowl-jquery-tooltip-plugin-for-web-design

Generic Popups

I know the main focus of this collection is for Tooltips but I just can’t let this gem pass without you knowing about it. It has tooltips too, and most of all you have the freedom to customize it at your own liking!

10. jQuery Ajax Tooltip

Interesting tooltip which can handle image and text together like a mini page. It has a drop shadow effect.

rndnext-blogspot-jquery-ajax-tooltip-jquery-tooltip-plugin-for-web-design

11. Digg-style post sharing tool with jQuery

Cool digg-style post sharing tool. This tooltip could be very useful for social networking website.

queness-digg-style-post-sharing-tool-jquery-tooltip-plugin-for-web-design

12. Input Floating Hint Box

Interesting tooltip with rounded corners for input fields. Tooltip fades in when you click on the input field and fades out when you click somewhere else.

nicolae-namolovan-googlepages-input-hint-box-jquery-tooltip-plugin-for-web-design

13. Simpletip

Beautifully made tooltip with fade transitions. When you hover over a link, a tooltip fades in just above or below the link.

simpletip-craigsworks-jquery-tooltip-plugin-for-web-design

14. qTip

Very simple but good looking tooltip. This tooltip is available with rounded corners and also as a speech bubble tip.

craigsworks-qtip-jquery-tooltip-plugin-for-web-design

15. Orbital Tooltip

Interesting tooltip plugin where you can set manually where your tooltip will show up.

userfirst-orbital-jquery-tooltip-plugin-for-web-design

16. Inline HTML Tooltip

Cool tooltip with nice transition effects.

javascriptkit-inline-html-tooltip-jquery-tooltip-plugin-for-web-design

17. tipsy

Interesting good looking tooltip which appears above, below, on the right or left side of the link.

onehackoranother-tipsy-jquery-tooltip-plugin-for-web-design

18. Easiest jQuery Tooltip Ever

Simple tooltip but it could be useful to display an image when you hover over a link.

cssglobe-easiest-jquery-tooltip-ever-jquery-tooltip-plugin-for-web-design

19. BsTip

Various simple tooltips with fade in and fade out transition effects and border around them.

benchsketch-bstip-jquery-tooltip-plugin-for-web-design

19.1. Shiny Tooltips

Have you seen a tooltip that makes an item…shine? Blind your visitors with magnificence!

20. EZPZ Tooltip

Very simple tooltip with border around it, which follows your mouse.

theezpzway-ezpz-jquery-tooltip-plugin-for-web-design

21. BeautyTips

Nice balloon style tooltip with transparency effect. There are available various tooltip styles, even interesting tooltips with cool animation, so you can choose one that fits best for your needs.

lullabot-beautytips-jquery-tooltip-plugin-for-web-design

22. Tooltip

Various tooltip plugins for your website. Here you can find a simple tooltip with a nice fade transition and also you can find a good looking bubble style tooltip.

bassistance-tooltip-jquery-tooltip-plugin-for-web-design

23. clueTip

Simple tooltip which shows up when you hover over a link and stays until you close it.

plugins-learning-jquery-cluetip-jquery-tooltip-plugin-for-web-design

24. Creating A Simple Tooltip Using jQuery and CSS

Few simple but different tooltips.

demos-blufusion-jquery-tooltips-jquery-tooltip-plugin-for-web-design

25. BetterTip

Tooltip which appears on the right side of the link.

edgarverle-bettertip-jquery-tooltip-plugin-for-web-design

26. jTip

This is simple but useful tooltip for login form.

codylindley-jtip-jquery-tooltip-plugin-for-web-design

27. jqTooltip

Simple tooltip with ajax loaded content. It has fade in and fade out transition effects.

hernan-amiune-jqtooltip-jquery-tooltip-plugin-for-web-design

28. Pop!

Simple tooltip which shows up when you click on the arrow button and disappears when you click somewhere else.

pop-seaofclouds-pop-jquery-tooltip-plugin-for-web-design

29. Create a Simple CSS + Javascript Tooltip with jQuery

Simple tooltip with rounded corners. It follows your mouse movements.

queness-simple-css-javascript-tooltip-jquery-tooltip-plugin-for-web-design

Point 1.2 – $3

Live Preview

 Did you enjoy this article and found it useful?

Peteris Kelle is 21 year old web designer. He has knowledge in various programs, such as Maya 3D, Flash, Photoshop, After Effects, Illustrator, etc. and also in various programming languages, such as Pascal, C, C++, Delphi, C++ Builder. He dedicates his free time to hobbies such as martial arts, mountain biking, snowboarding, playing Airsoft. Peter's aim is to start his own business. You can check Peter's works on his website. You can find him on Twitter or Myspace.
Free Website
 

 69 Brilliant Comments - Join Discussion Now!

  • Shazzad

    Posted 209 days ago
    53

    Hi, Thanks for these information. But one thing, most of these script/plugin conflicts with WordPress when implementing them manually. This may be for different jQuery version, but how can i detect this ? is there a way ?

  • Razibul Hassan

    Posted 229 days ago
    52

    Had been looking for a brilliant looking tooltip and this is the right place where I found it ….

  • Web design london - Evan Skuthorpe

    Posted 231 days ago
    51

    a great collection of examples! Thanks.

  • Mike Fook

    Posted 240 days ago
    50

    These are great, but not exactly what I was looking for. Anybody know where to find – or even, the name to call the effect where you have a triangle wedged in the upper right corner of the page – that never moves? Even if user scrolls – the triangle stays there – solid. It’s a link to another page – to an offer, usually.

    Anybody know what that thing is even called?

    Thanks for any help!

    Vern

  • araba arabalar

    Posted 242 days ago
    49

    thank you admin very nice tooltips

  • webiss

    Posted 243 days ago
    48

    I think this stuff
    http://graphicriver.net/item/bubbles-invasion-120-vector-shaped-bubbles/411340
    would be usefull with your great collection =)

  • livepage

    Posted 243 days ago
    47

    We’re looking for exactly this post! Thank you very much!

  • voiture au maroc

    Posted 251 days ago
    46

    Thanks very much

  • Reston Waste

    Posted 257 days ago
    45

    I like the coda pop up box, adds that little extra to the site, very nice.

  • Bakers Directory

    Posted 276 days ago
    44

    Awesome post. Looking for a great looking tooltip plugin. Found it here. :)

  • san

    Posted 282 days ago
    43

    Awesomeness jquery Help for web, it makes the things very easy for web development and degins. Thanks

  • RD Web Design

    Posted 286 days ago
    42

    These are excellent, jQuery really does make the difference between an ok website and a great website. Thanks for these.

  • Van

    Posted 292 days ago
    41

    Great! Thanks so much.

  • Rali Sravya

    Posted 293 days ago
    40

    Great collection, this is not easy collecting more ideas.

  • toopai

    Posted 294 days ago
    39

    Will use one of this for my website. Thanks for sharing!

  • parkesepeti

    Posted 306 days ago
    38

    This is verry good collection.

  • ocean

    Posted 307 days ago
    37

    longtime I was looking for nice script for my site http://www.5starstour.com, now I had thank jquery

  • SJL Web Design

    Posted 322 days ago
    36

    Thanks for this great post, I always like to learn new techniques and these tooltips have helped me a lot in the design and development process!

  • hadinug

    Posted 329 days ago
    35

    I like ;-)

  • Watch WWE Capitol Punishment 2011

    Posted 352 days ago
    34

    Great info you’ve given us here. I just want to show my appreciation for the hard work you’ve done to provide us with all of this great information. I’m going to pass the site along to a few classmates of mine who I know will absolutely love this site too. Thanks so much and keep up all the great work you’re doing. Bye!

  • bob

    Posted 375 days ago
    31

    Yeah, thanks for the last 2 hours trying to get Prototip working. This post is for JQUERY not PROTOTYPE!!!! You should remove that one. dumbass

    • Rean John Uehara

      Posted 374 days ago
      32

      Hi, really sorry for the inconvenience. I removed Prototip from the list now. Thanks for the heads up!

    • nick

      Posted 369 days ago
      33

      Haha – who is the ? :) There’s two hours you’re never getting back. Maybe you learnt something,

  • Hamza

    Posted 380 days ago
    29

    can you have these for wordpress i need those plugins for jquery

    • Rean John Uehara

      Posted 379 days ago
      30

      Hi Hamza, yes I believe you can use these on WordPress with just a little tweak. :)

  • Jose Fernandez

    Posted 391 days ago
    28

    Do you know the difference between Javascript and jQuery? Prototip, for example, is for the Prototype library, not jQuery.

  • Justin

    Posted 395 days ago
    27

    Not all of these use the jquery library.

  • Suraklin

    Posted 423 days ago
    26

    Thanks very much for the post. Very usefull.

1 2 3
US