Menu
I made a simple way to display help text that looks like a popup window using only CSS. It works good except by default the popup window is left justified. I would like the window to be closer to the icon itself like what (in my example) "left: 360px;" would show. Since the position of the hover icon may change, does anybody know of a way of setting the position of the popup window based on the position of the hovered over icon? We use jQuery and Prototype but I'd prefer to use only CSS so the same code could be used on either type of page. Thanks.
Here's my example:
EDIT: This was already answered but here's the fixed code in case anybody else is looking for an easy way to display a popup message when hovering over an icon. Also, here's an example of it on jsfiddle.net so you can easily try it out: http://jsfiddle.net/zDADW/
By the way, if anyone knows why someone would rank this down one (as of this writing someone clicked the down arrow for this question), please let me know.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Show help text when hovering using CSS</title>
<style type="text/css">
#help:hover #help_popup {
/*If you hover over the help icon, show the help_popup span*/
display: block;
}
#help {
/*This is the part I was missing*/
position: relative;
}
#help_popup {
/*Normally, hide this span*/
display: none;
position: absolute;
width: 15em;
padding: 10px;
background: #CFF;
color: #000;
border: 3px solid;
text-align: center;
left: 10px; /*this is still needed even if it's 0*/
}
</style>
</head>
<body>
<div>
This shows a popup window using CSS when you mouse over an image.
<div>
Hover over the question mark for a popup help window.
<span id="help">
<img src="questionmark.png" alt="[?]"/>
<span id="help_popup">
This is the normally hidden help text.
<br/>It only shows up when you hover over the question mark.
</span>
</span>
</div>
</div>
</body>
</html>
793
Add #help { position: relative; } to your CSS. This will allow the absolutely positioned element to calculate it's position relative to the #help element. You'll probably find that you want to decrease the left property once you make this change.
jsFiddle demo
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
