Geek Answers Handbook

Position one element based on the position of another element using only CSS

I made an easy way to display help text that looks like a popup using CSS only. It works well, except that the popup by default remains justified. I would like the window to be closer to the icon itself, like that (in my example) "left: 360px;" will be shown. Since the position of the guidance icon may change, does anyone know of a way to set the position of the popup based on the position of the icon hovered above? We use jQuery and Prototype, but I would prefer to use only CSS so that the same code can be used on any type of page. Thanks.

Here is my example:

EDIT: This has already been answered, but there is a fixed code in case anyone else is looking for a simple way to display a pop-up message when you hover over the icon. Also, here is an example of this on jsfiddle.net, so you can easily try: http://jsfiddle.net/zDADW/

By the way, if anyone knows why someone would rate this one at a time (at the time of 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 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>
+7
source share
1 answer

Add #help { position: relative; } #help { position: relative; } into your CSS. This will allow an absolutely positioned element to calculate its position relative to the #help element. You will probably find that you want to reduce the left property after making this change.

jsFiddle demo

+7
source

More articles:


All Articles