Demo

You will see a working demo right here! (click here to open the tooltip again)

You can have a tooltip open automatically and also manually.

Once you've closed that tooltip you can click here to open another!

Straight to the Tooltip

At the moment only one tooltip can be open at a time. I plan to create further versions to allow mouseover, and multiple tooltips, etc; so be sure to check back for updates!

Anyway, first of all download and unzip the source files. You can upload your own rounded borders and this will allow the rounded borders to show up over multiple browsers.

Then simply use code similar to the code below (this is the code of the demo on this page):

What to Write

 
                  <script type="text/javascript" src="js/jquery.js"></script>
                  <script type="text/javascript" src="js/tooltip.js"></script>
                  <script type="text/javascript">
                  $(document).ready(function(){
                    $('#demo-p').tooltip({direction: 'e'}, '<h5>The Demo</h5><p>You are now viewing the demo!</p><p>Once you close this window, you can click the element (link in this case) to repopen the tooltip.</p><p>You can  manually open tooltips, try clicking "contact me"!</p>','true');
                    $('#contact').tooltip({direction: 's'}, '<h5>Contact Me</h5><p>Nice! You clicked me, this is part of the demo but if you wanna contact me, <a href="http://elliotlings.com/contact.php">click here</a>.</p>','');
                  });
                  </script>

Stuff to Know

1) Firstly declare the variable you want it to point to.

2) The direction {direction: 'n'}, which way do you want it to point from.

3) The contents of the tooltip.

4) Auto start - 'true' for autostart, anything for manual.

There are a few settings near to the top in the Tooltip JavaScript file where you can edit the bounce.

Download

Download (download via jQuery Plugins)

Where has it been used?

Please tell me where you have used the tooltip!

Places it has been used: