Tooltip or alternative

JavaScript
1

It seems like all the best looking tooltip scripts are done with jquery these days. - that’s why I’m posting here. However, they all seem to lack one important thing - tutorials or documentation that doesn’t assume a preexisting familiarity with jquery. So no matter how many I download or search through I can’t make heads or tails of how to implement them.

Here is what I need: 2 or 3 larger tooltip(like) objects with different content and different trigger text. However the kicker is that the content has paragraph tags in it and I can find none that allow it or even discuss that. All I could find was a mention on one site that the paragraph tag would end the tooltip thus breaking it.

Can anyone point me in the right direction of what method I should best use and hopefully has jquery dummy instructions?

thank you.

2

Are you able to provide a screen shot of how you’ve like this to appear?

3

Hi, Thank you for your response. I was hoping to create something like the image below - off the end of the text. Since this will be near the footer of the page having the arrow at the bottom is the best way I could think to design it.

4

A couple of options I know of are:

http://demo.tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/colortips.html
http://pop.seaofclouds.com/
http://raena.net/trythis/citetooltips.html
http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/

The thing about jQuery is that it’s pretty much plug and play. If you view the source code of the demon pages, you see a few basic things:

  • a link to the jQuery library (you can either link to the Google version or put it in a .js file on your own site)
  • one or two links to specific scripts to set up and/or invoke the specific behavior required.

Then you just tweak the CSS to get positioning and styling right.