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.\[code\]<!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="http://stackoverflow.com/questions/15661984/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>\[/code\]
Position one element based on the position of another element using only CSS
- Thread starter VobUnlott
- Start date