Jan 24, 2012

Handy Hover Popup CSS for Salesforce Lists/Tables

Hover popups are a quick way to spruce up your salesforce.com interfaces while providing your users valuable information that does not require a new page to load. This simple hover popup is using cascading style sheets, and is very easy to add to lists and tables in your visualforce pages.


Step one:
Add the following styles to a css file. Add the css file to a static resource zip (in this example, I am using crmscience_resources.zip and crmscience.css).
These classes work nicely with the standard pageBlockTable styles as they are set to a height that allows you to see the detail in the popup for each row as you move your mouse down the rows. You can change the look and feel by changing the styles - the last two styles are for the hidden section.
.HoverPopup {
    position: relative;
    z-index: 0;
    }

.HoverPopup:hover {
    background-color: #eeeeee;
    Text-decoration: none;
    z-index: 50;
    }

.HoverPopup div {
    position: absolute;
    visibility: hidden;
    }

.HoverPopup:hover div {
    visibility: visible;
    top: 20px;
    left: 0px;
    border: 1px solid black;
    background-color: #eeeeee;
    padding: 10px;
    color: black;
    Text-decoration: none;
    white-space: pre;
    }

Step two:
In the visualforce page you are going to include the hover popups, add the following right after the <apex:page> (change the resource and css file names to what you created). Note that this should go in the top level page, even if you include the code in step 3 in a separate component.


.....
.....
.....


Step three:
Add the following to your visualforce component or page. The {!c.Name} is the text/link that shows up in the table, and everything inside the div will show up in the hover popup. Be careful though... Salesforce adds a bunch of divs and spans everywhere, but as long as you use a div inside the outputLink you should be fine.

    
        {!c.Name}