Apr 22, 2012

Handy Inline JavaScript and CSS Hover Popup for Salesforce Lists/Tables

I tried to use my handy CSS hover popup in a table that was included within a component that also included a partial page refresh action (using rerender). The popup was working fine when the page was initially rendered. However, as soon as a partial refresh event occurs, the component loses track of the CSS that is included in the main page (static resource). Not sure why that happens. I tried everything I could think of, but could not get the component to remember the stylesheets after the rerender.

So I decided to recreate the same functionality with javescript and inline CSS. That way I am not giving the component the opportunity to lose the stylesheet from the parent page. I simplified the code to be as compact as possible, and you don't need a static resource or adding the visualforce stylesheet tag to the hosting page. What makes this work is the onmouseover and onmouseout events in the link as well as the z-index style in the link and the div inline styles.

A couple of final notes:
  • The div needs to follow the end outputlink without any white space because some browsers treat white space as elements on the page, which makes the javascript nextsibling not work.
  • If the popup detail does not have carriage returns or special formatting use the an outputtext inside the div like in the example below. If you want to preserve carriage returns, use the following inside the div instead: <pre>{!c.Description}</pre>