How to Display Your RSS Count in a Cool Tooltip
This post was originally published in 2008
The tips and techniques explained may be outdated.
Having already used jQuery within Blog.SpoonGraphics in the form of the collapsible comment area I set out to find a prebuilt tooltip script that could easily be implemented.
You will also need to download the latest version of jQuery.
Place the two files in a relevant directory in your website structure, using WordPress I save the files in my theme folder in their own ‘js’ directory.Â Reference the two files in the <head> section of your website, WordPress users modifying the header.php file like so:
Also, paste in the CSS styling supplied from CSS Globe in your stylesheet.
Next up is to generate the feed count using Feedburners API, if you don’t already use Feedburner to manage your RSS feeds simply head over and create an account.Â Using a great tutorial from 45n5.com, we can copy the PHP code and paste it into our webpage header, entering your own Feedburner id under ‘uri=’.
Modify your RSS Feed link by adding
class="tooltip" to integrate it with the jQuery script.Â The actual text presented in the tooltip is placed in a title tag, output the feedcount followed by the word ‘Subscribers’ or ‘Readers’ like so:
title="<?php echo $fb;?> Subscribers"
The overall link should now look like:
<a class="tooltip" title="=" href="http://feeds.feedburner.com/YourFeed"> Subscribers"><img src="Your-RSS-Icon.jpg" alt="Subscribe by RSS" /></a>
Add a finishing touch to the tooltip by creating a translucent background that will allow the underlaying site to show through.Â In Adobe Photoshop create a 178x46px document, draw a rounded rectangle, fill with a colour of your choice and drop the opacity to 60% leaving the image showing Photoshop’s chequered transparency pattern.Â Go to File > Save As and select PNG from the dropdown.
Alter the textual styling to match your sites content, and reference the PNG background in the CSS.Â In my case the CSS is as follows:
font-family: "Times New Roman", Times, serif;
background: url(images/tooltip-bg.png) no-repeat;
Upload the files and test.Â Now we all know that IE6 doesn’t like PNG files with Alpha transparencies, if you need to cater for prehistoric browsers don’t forget to add an IE6 PNG Fix.