1. wTooltip

This is a tooltip that supports a lot of options out of the box. It has a default option that directly mimics the browsers tooltip behaviour. It also has a mouse follow option and a set position option. It also has an auto positioning feature if hits the browser edges to put the tooltip in the best fit for the available space. It also comes with a lot of colour themes and is written really well. A fantastic jQuery tooltip plugin to have in your arsenal.

• download & usage •

Try Now:

default •	Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/wTooltip/wTooltip.1.7.min.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/wTooltip/wTooltip.1.7.min.js"></script> <div id="wTooltip1" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#wTooltip1").wTooltip(); </script>
default • with time to stop •	Hover over me compare with default -> Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/wTooltip/wTooltip.1.7.min.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/wTooltip/wTooltip.1.7.min.js"></script> <div id="wTooltip2_1" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <span style="font-size: 10px;">compare with default -></span> <div id="wTooltip2_2" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#wTooltip2_1").wTooltip({ timeToStop: 2000 }); </script>
colors • with fade • follow mouse •	Hover over me Hover over me Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/wTooltip/wTooltip.1.7.min.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/wTooltip/wTooltip.1.7.min.js"></script> <div id="wTooltip3_1" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#wTooltip3_1").wTooltip({color: "red", fadeIn: 200, fadeOut: 200, position: "mouse"}); </script> <div id="wTooltip3_2" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#wTooltip3_2").wTooltip({color: "green", fadeIn: 200, fadeOut: 200, position: "mouse"}); </script> <div id="wTooltip3_3" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#wTooltip3_3").wTooltip({color: "blue", fadeIn: 200, fadeOut: 200, position: "mouse"}); </script>
with fade • with delay • set positions •	Hover over me Hover over me Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/wTooltip/wTooltip.1.7.min.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/wTooltip/wTooltip.1.7.min.js"></script> <div id="wTooltip4_1" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#wTooltip4_1").wTooltip({color: "black", fadeIn: 200, fadeOut: 200, delayIn: 150, delayOut: 50, position: "tc", offsetX: 3, offsetY: 3}); </script> <div id="wTooltip4_2" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#wTooltip4_2").wTooltip({color: "yellow", fadeIn: 200, fadeOut: 200, delayIn: 150, delayOut: 50, position: "rm", offsetX: 3, offsetY: 3}); </script> <div id="wTooltip4_3" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#wTooltip4_3").wTooltip({color: "plum", fadeIn: 200, fadeOut: 200, delayIn: 150, delayOut: 50, position: "bl", offsetX: 3, offsetY: 3}); </script>
default •	click me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/wTooltip/wTooltip.1.7.min.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/wTooltip/wTooltip.1.7.min.js"></script> <div id="wTooltip5" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" onclick="wTooltip5_toggle();" title="This box is off">click me</div> <script type="text/javascript"> var tip = $("#wTooltip5").wTooltip(); function wTooltip5_toggle() { if($("#wTooltip5").hasClass("active")) { $("#wTooltip5").removeClass("active"); $("#wTooltip5").wTooltip("title", "This box is off"); } else { $("#wTooltip5").addClass("active"); $("#wTooltip5").wTooltip("title", "This box is on"); } } </script>

2. qTip

By far the most impressive plugin having pretty much every possible feature you could imagine for a tooltip plugin. It supports tons of positioning, colors out of the box, fade effects and much more. The only knock on it is that it almost has too many options and can be a bit confusing to get going with what you want.

• download • usage •

Try Now:

default •	Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/tiptip/tipTip.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/qTip/jquery.qtip-1.0.0-rc3.js"></script> <div id="qtip1" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#qtip1").qtip(); </script>
with styles • alignments •	Hover over me Hover over me Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/tiptip/tipTip.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/qTip/jquery.qtip-1.0.0-rc3.js"></script> <div id="qtip2_1" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#qtip2_1").qtip({ style: { name: "red", tip: true }, position: { target: "mouse", corner: { target: "topLeft", tooltip: "bottomLeft" } } }); </script> <div id="qtip2_2" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#qtip2_2").qtip({ style: { name: "green", tip: true }, position: { target: "mouse", corner: { target: "topRight", tooltip: "bottomLeft" } } }); </script> <div id="qtip2_3" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#qtip2_3").qtip({ style: { name: "blue", tip: true }, position: { target: "mouse", corner: { target: "rightMiddle", tooltip: "bottomLeft" } } }); </script>
with styles • alignments • fade effect •	Hover over me Hover over me Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/tiptip/tipTip.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/qTip/jquery.qtip-1.0.0-rc3.js"></script> <div id="qtip3_1" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#qtip3_1").qtip({ style: { name: "cream", tip: true }, position: { corner: { target: "topMiddle", tooltip: "bottomRight" } }, show: { effect: { type: "fade", length: "1000" } }, hide: { effect: { type: "fade", length: "1000" } } }); </script> <div id="qtip3_2" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#qtip3_2").qtip({ style: { name: "dark", tip: true }, position: { corner: { target: "bottomMiddle", tooltip: "topLeft" } }, show: { effect: { type: "fade", length: "1000" } }, hide: { effect: { type: "fade", length: "1000" } } }); </script> <div id="qtip3_3" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#qtip3_3").qtip({ style: { name: "light", tip: true }, position: { corner: { target: "bottomMiddle", tooltip: "topRight" } }, show: { effect: { type: "fade", length: "1000" } }, hide: { effect: { type: "fade", length: "1000" } } }); </script>

3. Tooltipsy

Plugins that just work well out of the box are always great and puts them ahead of the pack. Tooltipsy is a great jQuery tooltip plugin that just works. It provides a lot of nice options with some cool effects. The only issue I see with it, is that it has too many options which can be confusing and difficult to setup particularly with the animations. I would like to see some basic options like 'animation': 'slide-left' that automatically setup those effects for you. All in all, nice plugin.

• download • usage •

Try Now:

default • with styles •	Hover over me <script type="text/javascript" src="/a/plugins/tooltips/jquery/tooltipsy/tooltipsy.min.js"></script> <div id="tooltipsy1" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#tooltipsy1").tooltipsy({ css: { "padding": "10px", "max-width": "200px", "color": "#303030", "background-color": "#f5f5b5", "border": "1px solid #deca7e", "-moz-box-shadow": "0 0 10px rgba(0, 0, 0, .5)", "-webkit-box-shadow": "0 0 10px rgba(0, 0, 0, .5)", "box-shadow": "0 0 10px rgba(0, 0, 0, .5)", "text-shadow": "none" } }); </script>
with styles • align to cursor •	Hover over me <script type="text/javascript" src="/a/plugins/tooltips/jquery/tooltipsy/tooltipsy.min.js"></script> <div id="tooltipsy2" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#tooltipsy2").tooltipsy({ alignTo: "cursor", offset: [10, 10], css: { "padding": "10px", "max-width": "200px", "color": "#303030", "background-color": "#f5f5b5", "border": "1px solid #deca7e", "-moz-box-shadow": "0 0 10px rgba(0, 0, 0, .5)", "-webkit-box-shadow": "0 0 10px rgba(0, 0, 0, .5)", "box-shadow": "0 0 10px rgba(0, 0, 0, .5)", "text-shadow": "none" } }); </script>
with styles • animation •	Hover over me <script type="text/javascript" src="/a/plugins/tooltips/jquery/tooltipsy/tooltipsy.min.js"></script> <div id="tooltipsy3" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#tooltipsy3").tooltipsy({ offset: [-10, 0], show: function (e, $el) { $el.css({ "left": parseInt($el[0].style.left.replace(/[a-z]/g, "")) - 50 + "px", "opacity": "0.0", "display": "block" }).animate({ "left": parseInt($el[0].style.left.replace(/[a-z]/g, "")) + 50 + "px", "opacity": "1.0" }, 300); }, hide: function (e, $el) { $el.slideUp(100); }, css: { "padding": "10px", "max-width": "200px", "color": "#303030", "background-color": "#f5f5b5", "border": "1px solid #deca7e", "-moz-box-shadow": "0 0 10px rgba(0, 0, 0, .5)", "-webkit-box-shadow": "0 0 10px rgba(0, 0, 0, .5)", "box-shadow": "0 0 10px rgba(0, 0, 0, .5)", "text-shadow": "none" } }); </script>

4. Poshy Tip

This is a nice little jQuery tooltip plugin that works quite well out of the box with quite a nice variety of options. It supports a variety of colors and comes with a nice little fade in animated transition for when the tooltip appears that looks really cool. The only strange thing I'm assuming to keep it lightweight is that the developer has split up all the styles into separate files, so you will have to include the theme for each color style you want.

• download & usage •

Try Now:

basic usage • violet color •	Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-darkgray/tip-darkgray.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-green/tip-green.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-skyblue/tip-skyblue.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-twitter/tip-twitter.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-violet/tip-violet.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-yellow/tip-yellow.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-yellowsimple/tip-yellowsimple.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/poshytip-1.1/src/jquery.poshytip.min.js"></script> <div id="poshytip1" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#poshytip1").poshytip({ className: "tip-darkgray", bgImageFrameSize: 9 }); </script>
with offset • color options •	Hover over me Hover over me Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-darkgray/tip-darkgray.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-green/tip-green.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-skyblue/tip-skyblue.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-twitter/tip-twitter.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-violet/tip-violet.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-yellow/tip-yellow.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-yellowsimple/tip-yellowsimple.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/poshytip-1.1/src/jquery.poshytip.min.js"></script> <div id="poshytip2_1" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#poshytip2_1").poshytip({ className: "tip-green", bgImageFrameSize: 9, offsetX: 20, offsetY: 20 }); </script> <div id="poshytip2_2" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#poshytip2_2").poshytip({ className: "tip-skyblue", bgImageFrameSize: 9, offsetX: 20, offsetY: 20 }); </script> <div id="poshytip2_3" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#poshytip2_3").poshytip({ className: "tip-violet", bgImageFrameSize: 9, offsetX: 20, offsetY: 20 }); </script>
with align • color options •	Hover over me Hover over me Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-darkgray/tip-darkgray.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-green/tip-green.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-skyblue/tip-skyblue.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-twitter/tip-twitter.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-violet/tip-violet.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-yellow/tip-yellow.css" /> <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/poshytip-1.1/src/tip-yellowsimple/tip-yellowsimple.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/poshytip-1.1/src/jquery.poshytip.min.js"></script> <div id="poshytip3_1" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#poshytip3_1").poshytip({ className: "tip-twitter", bgImageFrameSize: 9, alignX: "center" }); </script> <div id="poshytip3_2" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#poshytip3_2").poshytip({ className: "tip-yellowsimple", bgImageFrameSize: 9, alignX: "center" }); </script> <div id="poshytip3_3" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#poshytip3_3").poshytip({ className: "tip-yellow", bgImageFrameSize: 9, alignX: "right" }); </script>

5. TipTip

A really great looking tooltip that worked really well out of the box. It has a lot of options you can set giving you all the flexbility you need. The only thing missing is a mouse follow mode, meaning the tooltip position is always static with respect to the hover element.

• download & usage •

Try Now:

default •	Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/tiptip/tipTip.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/tiptip/jquery.tipTip.js"></script> <div id="tiptip1" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#tiptip1").tipTip(); </script>
fade effect • top align •	Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/tiptip/tipTip.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/tiptip/jquery.tipTip.js"></script> <div id="tiptip2" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#tiptip2").tipTip( { fadeIn: 800, fadeOut: 800, defaultPosition: "top" }); </script>
fade effect • delay effect • right align •	Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/tiptip/tipTip.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/tiptip/jquery.tipTip.js"></script> <div id="tiptip3" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#tiptip3").tipTip( { fadeIn: 800, fadeOut: 800, delay: 1000, defaultPosition: "right" }); </script>

6. Tipsy

This is a great little tooltip plugin that worked extremely well out of the box. It provides the pretty standard set of options for a tooltip with a fade and delay effect along with some positioning. The only thing I would say is lacking is that it's tooltip positioning is static not allowing a follow mouse mode.

• download • usage •

Try Now:

default •	Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/tipsy/src/stylesheets/tipsy.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/tipsy/src/javascripts/jquery.tipsy.js"></script> <div id="tipsy1" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#tipsy1").tipsy(); </script>
fade effect • southeast align •	Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/tipsy/src/stylesheets/tipsy.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/tipsy/src/javascripts/jquery.tipsy.js"></script> <div id="tipsy2" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#tipsy2").tipsy( { fade: true, gravity: "se" }); </script>
fade effect • delay effect • northwest align •	Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/tipsy/src/stylesheets/tipsy.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/tipsy/src/javascripts/jquery.tipsy.js"></script> <div id="tipsy3" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#tipsy3").tipsy( { fade: true, gravity: "nw", delayIn: 500, delayOut: 500 }); </script>

7. ColorTip

By far the simplest tooltip plugin to use. It positions to top center and only supports two options: color (red, green, blue, white, yellow, black) and a timeout/delay option. If you want a really light weight tooltip plugin and are fine with it's limited options than this may work great for you.

• download & usage •

Try Now:

default •	Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/colortip-1.0/colortip-1.0-jquery.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/colortip-1.0/colortip-1.0-jquery.js"></script> <div id="colortip1" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#colortip1").colorTip(); </script>
red color • green color • blue color •	Hover over me Hover over me Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/colortip-1.0/colortip-1.0-jquery.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/colortip-1.0/colortip-1.0-jquery.js"></script> <div id="colortip2_1" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#colortip2_1").colorTip({color: "red"}); </script> <div id="colortip2_2" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#colortip2_2").colorTip({color: "green"}); </script> <div id="colortip2_3" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#colortip2_3").colorTip({color: "blue"}); </script>
black color • white color • timeout •	Hover over me Hover over me <link rel="Stylesheet" type="text/css" href="/a/plugins/tooltips/jquery/colortip-1.0/colortip-1.0-jquery.css" /> <script type="text/javascript" src="/a/plugins/tooltips/jquery/colortip-1.0/colortip-1.0-jquery.js"></script> <div id="colortip3_1" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#colortip3_1").colorTip({color: "black", timeout: 500}); </script> <div id="colortip3_2" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <script type="text/javascript"> $("#colortip3_2").colorTip({color: "white", timeout: 500}); </script>

8. BetterTooltip

This is a sharp looking tooltip, but comes with pretty much no options other than some delay controls. Straight forward and to the point, great if you need no options and you're only looking for simplicity.

• download & usage •

Try Now:

default •

delay effect •

Hover over me

9. jQuery Tools

This tooltip plugin supports a ton of options allowing you to do things like opacity, posititiong, fades and delays out of the box. It does however require you to style your tooltip initially and I found it to be a little annoying that there wasn't something default that just worked. It also only allows static positioning with respects to the element not to the mouse which I think is also lacking to an otherwise great plugin.

• download • usage •

Try Now:

default •	Hover over me <script type="text/javascript" src="/a/plugins/tooltips/jquery/jquery-tools/jquery.tools.min.js"></script> <div id="jquery_tools1" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <style> .jquery_tools_tooltip{ display:none; border-radius:5px; background-color:#000000; font-size:12px; padding:5px 10px; color:#FFFFFF; } </style> <script type="text/javascript"> $("#jquery_tools1").tooltip( { tipClass: "jquery_tools_tooltip", opacity: 0.7 }); </script>
fade effect • bottom center align •	Hover over me <script type="text/javascript" src="/a/plugins/tooltips/jquery/jquery-tools/jquery.tools.min.js"></script> <div id="jquery_tools2" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <style> .jquery_tools_tooltip{ display:none; border-radius:5px; background-color:#000000; font-size:12px; padding:5px 10px; color:#FFFFFF; } </style> <script type="text/javascript"> $("#jquery_tools2").tooltip( { tipClass: "jquery_tools_tooltip", opacity: 0.7, effect: "fade", position: "bottom center" }); </script>
fade effect • delay effect • center right align •	Hover over me <script type="text/javascript" src="/a/plugins/tooltips/jquery/jquery-tools/jquery.tools.min.js"></script> <div id="jquery_tools3" style="display:inline-block; cursor:pointer; padding: 5px; margin-right:10px; border:solid #CACACA 1px;" title="How do you like this tooltip hover?">Hover over me</div> <style> .jquery_tools_tooltip{ display:none; border-radius:5px; background-color:#000000; font-size:12px; padding:5px 10px; color:#FFFFFF; } </style> <script type="text/javascript"> $("#jquery_tools3").tooltip( { tipClass: "jquery_tools_tooltip", opacity: 0.7, effect: "fade", position: "center right", predelay: 500, delay: 500 }); </script>