I really want to put a little question mark image next to some of the input fields on my for so the user can click and get a little box to come up and provide some help text. A tooltip might work for this too. Here is what I would like:
Thanks!
It can be done purely in CSS if you don't mind it appearing on hover instead of on click. Try this:
<html>
<head>
<style type='text/css'>
a.helpAnchor {
position:relative;
text-decoration:none;
}
a.helpAnchor .helpIcon {
position:absolute;
text-align:center;
font-size:24px;
font-weight:bold;
width:30px;
height:30px;
color:#ff0;
background-color:#88f;
}
a.helpAnchor .helpText {
display:none;
}
a.helpAnchor:hover .helpText {
display:block;
position:absolute;
width:150px;
top:10px;
left:20px;
background-color:#eff;
color:black;
border:1px solid black;
}
</style>
</head>
<body>
<a href="#" class="helpAnchor">
<div class="helpIcon">?</div>
<div class="helpText">
<h1>Help Text</h1>
<p>This text is very helpful!</p>
<p>And so is this!</p>
</div>
</a>
</body>
</html>
It would look better - and simplify the CSS - if the question mark icon was an image. The CSS for the help text also needs adjusting for taste.