Basic CSS Popups

Every time I have a requirement for a basic CSS popup box of some kind, I end up going through the same process. Hunt through old code looking for straightforward examples, then trawl through the googleweb trying to find something that isn’t an example of a CSS popup menu.

I’m sure pure CSS popup menus are all well and good, but it’s painful picking out the useful bits.

So, more for my own future reference, a simple CSS popup can be accomplished using the following CSS:

a span {
	display: none;
	text-decoration: none;
}

a:hover {
/** fix for IE6 popup bug.  nice one Microsoft! */
	overflow: hidden;
	text-decoration: none;
}

a:hover span {
	display: inline;
	border: 1px solid black;
	position: absolute;
	background-color: white;
	padding: 5px;
	margin-left: 5px;
	overflow: hidden;
}

The first reference hides the popup, the second redisplays, using margin-left to move the popup a little to the right of the href it’s linked from.

Then create HTML as follows:

<p>this is a test this is a test this is a test this is a test this is a test this is a test this is a test
this is a test this is a test this is a test this is a test this is a test this is a test this is a test
<a href="#">popup<span>test message 1<br />test message 2</span></a>
this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test
this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test
this is a test this is a test this is a test this is a test this is a test this is a test </p>

Check this link for an example.