For the first version of the blogcrew page, I wanted to create a tooltip for each blog, which displayed the five most recent posts from the blog. Here is a little tutorial on how I accomplished this.

Requirements:
PHP
Prototype
Script.aculo.us
Tooltip.js
Feed2JS

Step 1:
Include prototype, scrip.aculo.us, and tooltip to the head section of your page.

Initialize the settings for tooltip, and add this to the head section of your page. For blogcrew, I wanted the tooltip show and hide events to be triggered on mouse click.

<script
type="text/javascript">
Tooltip.autoMoveToCursor = false;
Tooltip.showEvent = "click";
Tooltip.hideEvent = "click";
</script>

Step 2:
Next, create the link along with the rss icon to which the tooltip event handling will be attached. Make sure the image has a unique id for each link.

<a href="http://www.alistapart.com/">a list apart<</a>
<a href="http://www.alistapart.com/">
<img src="/images/blank.gif" title="Click to view recent posts" class=â€?signalâ€? alt="signal" id="alistapartlink” /></a>

After the above code, add the tooltip div layer. This layer will be automatically used by tooltip.js to display the tooltip information. Make sure to provide a unique id for the tooltip div. This id will be used by the Ajax updater to update the right tooltip div. Also, make sure the display is set to none by default.

<div class="tooltip" id="alistaparttp” style=”display: none;”></div>

The next step is to add the event observer to the rss image. This is done via the addObserver method; we will get to the details of this method later on. I pass the rss image id, tooltip div id, and the rss feed url to this method.

<script type='text/javascript'>
<!--
 addObserver( 'alistapartlink', 'alistaparttp', 'http://www.alistapart.com/rss.xml' );
//-->
</script>

Step 3:
Next, create a javascript file that contains the code that handles the click event, and makes the Ajax calls to get the feed rendered to html for display in the tooltip.

For blogcrew, this file is called bc1ajax.js. Firstly, create two constants, one to hold the url for Feed2JS (now you can use any technique you want here to render the information in the rss feed to html), and the other constant is the settings for Feed2JS.

var url = 'http://www.counterjumper.com/feed2js/feed2js.php';
var feedsettings = '&num=5&desc=100&date=n';

Next, create the addObserver method, which adds a mouseover event observer to the rss image we created in Step 2. The event observer handler function is where the Ajax call is made to Feed2JS, using prototype’s Ajax.Updater. The Ajax.Updater is setup with the id for the corresponding tooltip div, and this is how it will render the information from Feed2JS in to the tooltip. A loading indicator image is displayed in the tooltip div before the ajax update call.

function addObserver( linkid, tpid, feed )
{
   Event.observe(linkid, 'mouseover', function(e){
   $(tpid).innerHTML = "<img src='/images/greyloader1.gif' alt='loading...' />";

   new Ajax.Updater(tpid, url, {method: 'get', parameters: 'src='+ feed + feedsettings});});
}

Final Result: blogcrew page
Click on rss feed icon to view toolip rss feed.

Note:
In the case of blogcrew, I had to modify Feed2JS, and style it for my requirements. But the above steps are all you need to display a tooltip with information from an rss feed, using Ajax.