I recently decided that I wanted to add a little coolness to the RSS icon on Blog.SpoonGraphics by displaying the current subscriber count. Having seen plenty of javascript tooltip examples across the web I decided this would be the best solution, displaying the relevant information when the user hovers over the icon area. Using a combination of an extremely simple jQuery script and a PHP snippet follow this walkthrough on how to show your RSS count in a cool tooltip of your own.
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.
Learning jQuery is something I have planned for the near future, but luckily for us javascript noobs there are ready made downloads available, such as the Simplest jQuery Tooltip Ever from CSS Globe.
Download the bundle from CSS Globe or create a new javascript file from the source code supplied in the demo.
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 section of your website, Wordpress users modifying the header.php file like so:
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 178×46px 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
Posts
