wTooltip Demo

<link rel="Stylesheet" type="text/css" href="/a/plugins/wTooltip/wTooltip.css" /> <script type="text/javascript" src="/a/plugins/wTooltip/wTooltip.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>

<link rel="Stylesheet" type="text/css" href="/a/plugins/wTooltip/wTooltip.css" /> <script type="text/javascript" src="/a/plugins/wTooltip/wTooltip.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>

<link rel="Stylesheet" type="text/css" href="/a/plugins/wTooltip/wTooltip.css" /> <script type="text/javascript" src="/a/plugins/wTooltip/wTooltip.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({theme: "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({theme: "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({theme: "blue", fadeIn: 200, fadeOut: 200, position: "mouse"}); </script>

<link rel="Stylesheet" type="text/css" href="/a/plugins/wTooltip/wTooltip.css" /> <script type="text/javascript" src="/a/plugins/wTooltip/wTooltip.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({theme: "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({theme: "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({theme: "plum", fadeIn: 200, fadeOut: 200, delayIn: 150, delayOut: 50, position: "bl", offsetX: 3, offsetY: 3}); </script>

<link rel="Stylesheet" type="text/css" href="/a/plugins/wTooltip/wTooltip.css" /> <script type="text/javascript" src="/a/plugins/wTooltip/wTooltip.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>