Rich HTML Balloon Tooltip - Text wrap

[billgates2000]

1) Script Title:

Rich HTML Balloon Tooltip

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...oontooltip.htm

3) Describe problem:

I implemeted the script on my site, using the code given on dynamicdrive. The problem is, the text on my site will be dynamically shown based on what my users have submitted, and if a user has submitted a really wrong URL, part of it will not be visible since the text will be too long to fit in the balloon. Is there a way to modify the balloon so that the text continues to a next line if the text that is supposed to be shown has no spaces and is really long (like long URLs)?

Thanks,
n.

[jscheuer1]

Only IE officially has a style that explicitly sets the wrapping of content to allow breaking words. So, at least for that browser (Safari 3 Win also respects this style), you could set:

.balloonstyle, .balloonstyle * {
word-wrap: break-word;
}

Now, all browsers will break a URL on the up slashes (/). So it may not be quite as bad as you think.

Another choice would be to validate the length of the URL segments, and either not allowing:

a really wrong URL

if that's what you really meant, or adding <br> tags every 10 (or whatever) characters if what you meant was 'long'.

If you put <wbr></wbr> tags around each character, it will allow it to wrap on any character in FF, Safari 3 Win, and IE, but not Opera:

<wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr><wbr>g</wbr>

Any of these ideas (with the exception of the style) would require an addition to the code you use to dynamically generate the tip content. To help there, if you need/want it, it would be best to see your code that does that.

One style that just about all browsers would respect is overflow. You could set the overflow to hidden, this would crop the extra portion, make it invisible.

[jscheuer1]

After typing the above, I decided to Google the <wbr> tag, and found a way of using it here (though it certainly isn't a valid tag any longer), that will work in virtually all modern browsers (except Safari, for which you can still use the:

.balloonstyle, .balloonstyle * {
word-wrap: break-word;
}

.

For all others (though IE will also follow the above rule), you set this in your stylesheet*:

wbr:after { content: "\00200B"; }

Then in your routine that dynamically sets the content of the tip, the part that actually fills the tip with the URL, say you are using javascript and have the value in a variable named URL, you can do this:

var breakURL = URL.replace(/(.)/g, '<wbr>$1');

Then use the value of breakURL instead of URL to populate the tip. This will not work if using DOM level 2 methods (creating a text node), but will work with PHP (or other server side code) or in javascript using innerHTML. If using PHP or other server side code, the replacement function may (probably will) have a different name and/or syntax.


* See:

http://gojomo.blogspot.com/2005/03/c...-break-in.html

for more info on this method as far as the style part of it goes.

[jscheuer1]

An even simpler solution appears to be to use only this added style:

wbr { display: inline-block; }

Works for all browsers, but you still need to insert the <wbr> tags as mentioned in my previous post.