jquery tipsy tooltip issue

Panos used Ask the Experts™
Hello experts.
i have downloaded the jquery tipsy tooltip plugin from:http://plugins.jquery.com/project/tipsy
The problem is that the text don't wrap in IE.

You can download the files from the link above.

Any help?
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2010

What browser exactly? What version?


I tested this in IE 6
If it doesnt wrap by itself I guess you can force it to wrap, Show us the code which you have used on the tooltip which doesnt wrap.

To force it to wrap you can add a <br> onto a chunk of text to make it go onto the next line. And in the tipsy tooltips you should turn HTML on by doing this "{html: true }" like it says on that documentation

$('#example-html').tipsy({html: true });

After that add <br> into where you want it to send the text onto the next line.

<div id="#example-html" title="The quick brown fox<br>jumps over the lazy dog.">
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

<div id="example-html" title="The quick brown fox<br>jumps over the lazy dog.">  **** whoops added a # into id tag by mistake


Hi SleepinDevil.
I got the idea and it is working in IE.The problem is that it is wrapping twice  in FF and SAFARI and Chrome now.Once because of the <br> and once because of the script.And if i would have only one tooltip it would be easy to handle this but using this in a big form with many form fields would not be the best idea.May be there is another way to handle this.
Ok yes I understand now. I looked further into the code and realised why you are having this issue.

The way the script makes the tooltip wrap text is by having a CSS property called max-width. Now this works wonders and all that on the browsers BESIDES IE.

IE has issues with min-width and max-width.

There are some fixes for this and they are usually complicated. However the best and least complicated fix is to use a DOCTYPE.

The way doctype works is the w3c have made DTC files which the browsers are encourage to load up and these files fix various cross browser issues and other stuff. (you dont really need to know all this, im just telling you)

Ill attach how to add a DOCTYPE to your page in the code snippet. Try it out, heck it wont hurt right, if it doesnt work right then just get rid of it again!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<!--There we go! its as simple as adding that line to the top of the page before the <html> tag.-->

Open in new window

Also on the topic of DOCTYPEs check out this website to pick which DOCTYPE is the best for you. http://www.webmasterworld.com/html/3061635.htm


It does not work.
My test doctype is :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

and it is not working too.
Try one of the STRICT ones, Try this one I attached its XHTML Strict :S maybe it might coax IE into coorperating, which IE are you using by the way?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Open in new window


I tested all the options in the link you posted.None of these options is working


I'm testing this with IE6.I have not updated this on my local machine so that i can fix all the issues.
This is why, IE6 does not have good support for DOCTYPE tags. Try to get someone with IE7+ to test your pages for you, to see if they wrap or not, but I can pretty much predict that the text would wrap if you use one of the strict DOCTYPES on IE7+. Some statistics for you: http://www.w3schools.com/browsers/browsers_stats.asp

Only about 10% of the users will be using IE6, so you shouldn't bother too much about it not functioning as well as it should be. Afterall its not a fatal issue just a styling issue, and sometimes we cant make it look good on all the browsers.


Thank you for your help.


Thank you again for your help.
I wish you the best of luck with the rest of your coding!! Thanks for the points!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial