Bubble Tool Tips

[Admin]

Bubble Tool Tips for your Webpage.



Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.

Installation and customization of Bubble Tooltips is quite easy. They are composed mainly of four parts:

A small Javascript file of about 2Kb
A small CSS for their presentation
A single image in gif format for their graphics
Four lines of HTML in the head section of the page(s)

The javascript, the CSS and the image just need to be copied in the same directory of the page and the default presentation doesn't need changes. The lines that should be inserted in the head section are the following:

<script type="text/javascript" src="BubbleTooltips.js"></script> <script type="text/javascript"> window.onload=function(){enableTooltips()}; </script>

A very important note: the CSS for the tooltips, named bt.css is added dynamically by javascript only if the browser is found to be DOM-capable. If you're going to modify the file, just be sure to keep its name.

Bubble tooltips are unobtrosive and for browsers with bad DOM support or javascript disabled, the plain title of links will be displayed. Compatibility is quite good: they've been tested with success in IE5, IE5.5 and IE6 IE7 on Win, Opera 8.5, Safari 2.0 and Firefox 1.5. & 2.0

DEMO: http://www.tareeinternet.com/scripts...eTooltips.html

Download:

If having a large popup/tooltip it re-draws the bubble strangely, for example:

<a href="./tc.html" title="Morley-Derbyshire, Maidstone-Kent, County Hall-London, Manchester Airp-Manchester, Manchester-Manchester, Norwich-Norfolk, Druids Glen-Ireland, Portsmouth-Portsmouth, Preston-Lancashire, Sheffield-Sheffield, Meon Valley-Southampton, Meriden-Warwickshire, Shipley-West Yorkshire,York-York, Monmouthshire-Chepstow, Glasgow-Scotland, Inverness-Inverness, Bournemouth-Bournemouth">Click here for full list</a>


It will draw the tooltip to a maximum of 8 lines and then close the bubble with the .gif image..... then it will carry on listing the rest of the tooltip text with no .gif image background, and then just at the end of the text, draw the closing background.gif if you know what i mean?.

Any Suggestions.

Jon.

[Admin]

Not 100% sure exactly what you mean, however it's possible your loading the bubble up with too much text.

Do you have a demo page i could have a look at to see exactly what's going on?

If you don't want to post the URL you can send it to me via PM. When i see how it's behaving i would be able to suggest some code edits to modify it to suit what your trying to display.

Also i'll just edit the live email link in your post, just so bots don't pick it up and send you spam.

You know I'm getting the same issue. The bubble is maxing out at a certain point and then the text continues. So it looks obvious that the bubble is not a dynamic image where it can stretch according to the text. It floats behind the text to its max size and the text runs off the image.
Does that make sense?

[Admin]

Yes it's just a static image, the idea of it was a simple light weight Tooltip that displays a URL of up to 30 Characters and a brief description of the link similar to an Alt text attribute of 2-3 lines in length.

You can of course modify the dimensions of the bubble by changing the size values in bt.css

So it was just provided as a basic bubble catering for a link with a short description, which in most cases works perfectly for most peoples needs.. However if you wish to place more text in it, you are free to modify the file to suit your needs.