tags:

views:

210

answers:

4

Hi,

I need to generate a table from a list of objects. Each row will contain only the basic information for each object. However when the user hovers over a specific cell I want a popup, that contains all the information for that particular object, to appear. Maybe the popup should be in the form of a table with all the details of some sort? How do I accomplish this? Can I use JQuery with some effects on it as well?

A: 

Yes you can. You may use http://dev.iceburg.net/jquery/jqModal/ to accomplish this.

Alex Reitbort
A: 

Bind a mouseover event listener - that way when they hover over the intended element your callback will be called. Inside the callback you have access to the element which triggered the event - in your case td or tr - with that get the content of the entire row using appropriate jquery selector. Then you could display a dialog and now that you have the content you can display that inside the dialog.

Bharani
+1  A: 

I use jQuery tooltip for this kind of thing. You can use the bodyHandler option to execute Javascript to fill the tooltip pane, which you can arbitrarily style. See the examples.

cletus
+1  A: 

yep, jQuery is great for this kind of things.

there are (at least) two ways do to it:

  1. prepopulated and hidden (CSS): build on the HTML page all the popup detail tables inside the visible cells, using CSS to position them 'above' the main layer (and out of the cell), and with display:none, and add a .maincell:hover .detailtable { display:block;} to make them visible when the cursor is in the main cell.

  2. AJAX: bind functions to the "mouseenter" / "mouseleave" events of every main cell, there you use AJAX to get the detail table from the server and display in a positioned <div>, preferably on a fixed place, or maybe a few pixels to the right of the cursor (if it's a small table). jQuery's $("#inspector").load(dataURL) function makes it dead easy (where 'inspector' is the ID of the <div> where you insert the detail table).

Javier