Search code examples
jqueryasp.netpreviewqtip

Google/Bing-esque page preview tool


I need to add this kind of feature to a site that will "preview" a page when hovering over a link, similar to how Google and Bing handle it. The difference here is that this link doesn't open a new webpage, rather it displays information regarding what this link represents.

To give you an idea of what things look like, imagine an admin page that lists a bunch of support ticket requests, something like this...

       Assigned    ID      Submitted     Description
-----------------------------------------------------------------------
View |  Hristo  |  124  |  03.30.2011  | Update to jQuery 1.5
-----------------------------------------------------------------------
View |  Hristo  |  123  |  03.12.2011  | Add this preview functionality

... so hovering over "View" would result in seeing a preview of this "ticket" that would list the relavent information of the "ticket" such as the date it was submitted, who it was assigned to, and a small description of the ticket.

I looked into qTip because its flexible, customizable, and cross-browser compatible, but it looks like it hasn't been touched since 2009 so I'm not sure if it supports the latest version of jQuery. Is there another similar plugin?

Or, since the information I want to display is only text (there is no need for special rendering or other complicated computation to take place), how would I do this myself? It would be nice to see some sample code :)

Let me know if I need to clarify anything.


Solution

  • Here is a small sample of 30 different ToolTip plugins. There are literally hundreds out there that a google for "jquery tooltip" will turn up. Essentially each popup is a hidden div that you just show at the right time in the right location. This isn't too hard to do manually either.