Speech Bubbles Tooltip
Description: Speech Bubbles Tooltip lets
you add tooltips to links using either the value of the link's
title attribute, or rich HTML defined all inside a single HTML file
and fetched using Ajax instead. The style of the tooltip is modelled
after the iconic speech bubble and uses NO images, thanks to the
CSS triangle technique.
Compatibility wise Speech Bubbles Tooltip makes use of CSS3 rounded corners and shadows. It looks best in FF3+, Opera 9+, and Google Chrome/ Safari 4+. In IE7 and IE8, the tooltip lacks the rounded corners and shadows but otherwise looks and behaves the same.
Demos (move your mouse over the following links):
Image Optimizer lets you easily optimize regular gifs, animated gifs, jpgs, and pngs, so they load as fast as possible. A fan of ribbons? Create alternating colored horizontal rules quickly using the Ribbon Rules Generator. Or, generate a gradient image using Gradient Image Maker. And last but not least, if your site is missing a favourite icon- a 16x16 icon of your site shown in the user's location bar- generate one now using FavIcon Generator.
While all of the above tooltips have their contents defined inside a single external file, the following simply use the title attribute of their respective links to make up the tooltip: Visit JavaScript Kit for JavaScript tutorials! CSS Drive showcases some of the most attractive, CSS driven sites on the net.
Directions:
Step 1: Insert the following code into the <head> section of your page:
The above code references three external files which you should download below, by default into the same directory as where your page resides in (right click, and select "Save As"):
- speechbubbles.js
- speechbubbles.css (edit this file to change the style/color of the speech bubble tooltips)
- speechdata.txt (sample external file containing the markup for the tooltips)
Step 2: Insert the below example links onto your page, which each show a speech bubble tooltip when the mouse rolls over them:
That's it for installation, though lets see in detail now how to customize the script and modify the tooltips.
Script setup
By default the script will apply a speech bubble tooltip to any link on the
page carrying the CSS class="addspeech". The following line inside
the code of Step 1 initializes the script on those links on the page, plus loads
the file "speechdata.txt" (assumed to be in the
same directory as where the current page resides in), which I'm using to define
the markup of some of my speech bubble tooltips.
jQuery(function($){ //on document.ready
$('.addspeech').speechbubble({url:'speechdata.txt'})
})
If you're happy with this default set up, there is no need to edit the above code at all (otherwise, see here). Moving on, lets see how to define the speech bubble tooltips themselves.
Two ways to define each speech bubble tooltip's markup
There are two ways to define each of your speech bubble tooltip on the page.
1) The first method, the simplest, is just to add a title attribute to
the anchor link, which by default is a link with CSS class="addspeech":
<a class="addspeech" href="http://www.javascriptkit.com" title="Comprehensive JavaScript tutorials and over 400+ free scripts!">JavaScript Kit</a>
With just the "title" attribute present in an anchor link, the script will automatically use that attribute's value as its speech bubble tooltip content.
2) The second method of defining the tooltip markup is inside an external file, by default, inside "speechdata.txt". This method has the advantage of centralizing all your tooltip markup in one place, plus the ability to add rich HTML into the tooltip. The structure of such a tooltip should be:
<div id="speechbubble1"
class="speechbubbles">
Use this tool to easily <b>optimize</b> regular gifs, animated gifs, jpgs, and
pngs, so they load as fast as possible.
</div>
You can define multiple speech bubble tooltips this way, all contained inside your external file. Just make sure each tooltip DIV carries its own unique ID attribute:
<div>
<div id="speechbubble1" class="speechbubbles">
Use this tool to easily optimize regular gifs, animated gifs, jpgs, and pngs, so
they load as fast as possible.
</div>
<div id="speechbubble2" class="speechbubbles">
Create alternating colored horizontal rules quickly <b>with</b> this new Web 2.0
tool.
</div>
<div id="speechbubble3" class="speechbubbles">
Gradient images are used everywhere in web page design, such as the background
of form buttons, DIVs, to act as shadows etc. This tool lets you easily generate
a gradient image.
</div>
<div id="speechbubble4" class="speechbubbles">
Generate a favicon using any regular image with this tool. A favicon is a small,
16x16 image that is shown inside the browser's location bar and bookmark menu
when your site is viewed.
</div>
</div>
Then, back to your main page, for the anchor link you wish to associate a speech bubble tooltip from the external file with, add a "rel" attribute pointing to the ID of the desired tooltip:
<a class="addspeech" href="http://tools.dynamicdrive.com/imageoptimizer/" title="Image Optimizer!" rel="speechbubble1">Image Optimizer</a>
In the above case, the anchor link will display the tooltip with ID "speechbubble1"
inside the external file "speechdata.txt". Note
that the anchor link also carries a "title" attribute, though in
the precense of the "rel" attribute, will not have any bearing on
the tooltip's content.
Defining the path to the external file that contains your speech bubble tooltips' markup
The initialization function in the code of Step 1 gives you the option to load an external file onto the page containing all/same of your bubble tooltips' markup:
jQuery(function($){ //on document.ready
$('.addspeech').speechbubble({url:'speechdata.txt'})
})
Here the script assumes the external file is named "speechdata.txt" and residing in the same directory as where your page showing the tooltips are. You can change the location of this file to elsewhere on your server, and either specify an relative or even absolute path to the file inside the function
jQuery(function($){ //on document.ready
$('.addspeech').speechbubble({url:'tooltips/speechdata.txt'})
})
jQuery(function($){ //on document.ready
$('.addspeech').speechbubble({url:'http://www.mysite.com/tooltips/speechdata.txt'})
})
You cannot, however, specify an absolute URL that's outside your server's domain, such as "http://www.google.com/speechdata.txt', as Ajax security dictates that the calling page and page to be fetched via Ajax must be from the same domain.
Lastly, if you're simply defining the tooltips all using the "title"
attribute of the anchor links instead of inside an external file, you should
leave the external url option blank and simply call:
jQuery(function($){ //on document.ready
$('.addspeech').speechbubble()
})
Modifying the style of the tooltip
To modify the style of the tooltip, such as its color, edit speechbubbles.css.