persistent css hover popup

The separate "popup window" can be build as #popupContent box inside the #popupContainer, with a {top: 0;} and for the rest the position where you want it (try it on this page). With {overflow: auto;} a scrollbar can be included:

#popupContent { position: absolute; top: 0; bottom: 30%; right: 30%; left: 30%; overflow: auto; }

The semi-transparency of the overlay can be made transparent. But attention: for older Internet Explorers a simple {background: transparent} doesn't work (see here). They need a real transparent background-image, or a direct "base64" coded gif (which saves an extra http-request):

#popupContainer {
    ...
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
    }

What rests is the close button.

< How it is done (2) | demo | How it is done (4) >