I am trying to create a popup that occurs on mouse over of a row in a datatable with a datascroller. The idea is that the pop up will provide more information about the current entry than the data listed in the table, almost like a preview.

I was able to successfully do this using jQuery in a rich:jQuery tag outside the datatable however it only works on the first rows shown on load. The table will be paginated so when you click to see the next set of rows the javascript capability no longer works.

I have found that if you use the rich:dataTable attribute "onRowMouseOver" with standard javascript it will persist to the next set of rows. However I would like to be able to use the fadeIn effect of jQuery and I can't seem to get the jQuery to work using this "onRowMouseOver" attribute.

Here is a quick example that I was just trying to test.

<rich:dataTable id="candidates" style="width:100%; cursor:pointer;"
                    value="#{candidateDataModel}" rowClasses="row1, row2"
                    var="candidate" rows="4"
This won't work -------        onRowMouseOver="function(){jQuery(this).children('div.informationPopUp').fadeIn('fast')};"
This will work --------          onRowMouseOut="this.style.backgroundColor='#{a4jSkin.rowBackgroundColor}';"

Thanks for the help!