This is very similar to the original jQuery RSS demo but it also illustrates how to preview the rss post by hovering over the item in the list. The "tooltip" here is just a hidden div that is styled and shown when onmouseover is triggered.
Another jQuery plugin, Autocomplete, is used to load feeds into the RSS text box. Just start typing, and feeds that match your keystrokes will auto-display as you type. Otherwise, it will accept whatever URL you'd like.
$(document).ready(function() { $("#rssURL").val("http://feeds.encosia.com/Encosia"); $("#feedContainer").mouseout(function() { hidePreview(); }); $("#rssURL").autocomplete("RssURLs.ashx"); loadData(); hidePreview(); }); function hidePreview() { $("#divPreview").hide(); } function loadData() { $("#feedContainer").empty(); $.get("FeedServer.ashx?url=" + $("#rssURL").val(), function(data) { $(data).find('item').each(function() { var $item = $(this); var title = $item.find('title').text(); var link = $item.find('link').text(); var description = $item.find('description').text(); var pubDate = $item.find('pubDate').text(); var html = "<div id=\"div" + ctr + "\""; html += " style=\"margin-bottom:8px;cursor:pointer;\">"; html += "<div style=\"float:left;width:70%;\"><h4>" + title + "</h4></div>"; html += "<div style=\"float:left;\"><em>" + pubDate + "</em></div>"; html += "</div>"; $('#feedContainer').append(html); $("#div" + ctr).mouseover(function(e) { var dprv = $("#divPreview"); dprv.empty(); dprv.css({ position: "absolute", marginLeft: 5, marginTop: 1, top: e.pageY, left: e.pageX, width: "550px" }); dprv.append("<a href=\"" + link + "\" target=\"_blank\">Read More</a><br />"); dprv.append(description); dprv.show(); }); ctr++; }); }); }
<%@ WebHandler Language="C#" Class="FeedServer" %> using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.Services; using System.Xml.Linq; public class FeedServer : IHttpHandler { public void ProcessRequest (HttpContext context) { string url = context.Request.QueryString["url"]; XDocument feedXML = XDocument.Load(url); context.Response.ContentType = "text/xml"; context.Response.Write(feedXML.ToString()); } }