New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact

<script type="text/javascript" src=""></script>

<link rel="stylesheet" type="text/css" href="speechbubbles.css" />

<script src="speechbubbles.js">

* Speech Bubbles Tooltip- (c) Dynamic Drive (
* This notice MUST stay intact for legal use
* Visit for this script and 100s more.


<script type="text/javascript">

jQuery(function($){ //on document.ready
//Apply tooltip to links with class="addspeech", plus look inside 'speechdata.txt' for the tooltip markups


<p><a href="" class="addspeech" rel="#speechbubble1">Image
Optimizer</a> 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 <a href="" class="addspeech" rel="#speechbubble2">Ribbon Rules Generator</a>. Or, generate a gradient image using <a href="" class="addspeech" rel="#speechbubble3">Gradient Image Maker</a>. 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 <a href="" class="addspeech" rel="#speechbubble4">FavIcon Generator</a>.</p>

<p>While all of the above tooltips have their contents defined inside a <a href="speechdata.txt">single external file</a>, the following simply use the <b>title attribute</b> of their respective links to make up the tooltip: Visit
<a href="" class="addspeech" title="Comprehensive JavaScript tutorials and over 400+ free scripts!">JavaScript Kit</a> for JavaScript tutorials! <a target="_partner" href="" class="addspeech" title="Categorized CSS gallery and examples!">CSS Drive</a> showcases some of the most attractive, CSS driven sites on the net.</p>