jQuery lightweight tooltip script recommendation [closed]

Question

I am looking for a lightweight jQuery script for tooltips that is lightweight and can be easily used with image maps... Ideally it would automatically take the 'title' of each the area tag to function as a tooltip. The reason this is an issue is I have hundreds of areas (its a world map) and a line of code for each tooltip will soon add up in file size.

qTip can do this... but its 38kb... which is more than even jQuery itself. Any recommendations?

Multicolored

Answer 1

Not sure if it's exactly what you're looking for but check out Tipsy:
http://onehackoranother.com/projects/jquery/tipsy/

9 KB uncompressed
4 KB minified

Application

I really like the look of this one... and its very light weight – Multicolored

Answer 2

vTip might be a good candidate (see demo). It's a bit outdated, but it's dead simple and should work.

You just mark your DOM element by adding class="vtip" on it, e.g.

<a href="#" title="Tooltip content" class="vtip">Tooltip test</a>

Uncompressed JS file is only 4KB.

If you want to handle your tooltips in more dynamic way, consider creating your own simple tooltips.

Arjuna

Answer 3

I use the imaginatively-titled "jQuery Tooltip": demo here. Works well with image maps, and is easy to customize with CSS.

(Coincidentally, I tried qTip with image maps and found a weird bug when combined with the Map Hilight plugin).

Calutron

Phew... I am using the map Hilight plugin too :D... you probably saved me a lot of time – Multicolored

@Mark: If you're interested, this is what I built with it - simpsoncrazy.com/characters/poster – Calutron

Answer 4

PowerTip

http://stevenbenner.github.io/jquery-powertip/

PowerTip features a very flexible design that is easy to customize

• Supports static tooltips as well as tooltips that follow the mouse
• Ability to let users mouse on to the tooltips and interact with their content
• Mouse follow tooltips are constrained to the browser viewport
• Lightweight JS ~10KB, CSS ~2KB

---

Tipsy

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

It's used by Twitter, Github, Slideshare and Bitbucket, amongst others.

• Lightweight JS ~10KB, CSS ~2KB

Fluster

Thanks for update in this 3y old question, powertip is what I needed :) – Angeloangelology

Tipsy linkdead. – Grory

Answer 5

After big research none of answers to this question gave me satisfaction.

I needed one solution that is lightweight, is not abandonware as Tipsy (last update years ago, 63 bug fixing pull requests ignored by author) and I can use as typical tooltip as hint for form fields on hover, but also for dynamic field validation after form submit.

Really good one is as mentioned earlier PowerTip, but there is big issue with it: you can only have one tooltip visible at once. For me it's disqualification, I checked resources and this is basic assumption of author - only one tooltip at once, there is one single DOM object for all tooltips etc.

Tooltipster

After loosing another hour I found solution that is exactly what I needed: Tooltipster. It's really easy to implement (very similar to PowerTip) but it allows you to prepare and show many tooltips at once. Another advantage is fact of not using images at all, it's only js (~12k) and css.

Hope this will save many hours of research to someone.

Angeloangelology

While Tooltipster looks good, it's definitely not lightweight, the minified version comes in at a whopping 30kb for just the main javascript file. – Joanejoanie