Ask the CSS Guy

That's a great article.
The end result is clean cut. I saw it on Vox already, but thanks for the "behind-the-scenes" look!

An interesting tweak on forms. Thanks for writing it up.

Why, though, wouldn't you just use the :focus pseudo-class?

nice article there.

I see one problem here, what if a user has js disabled but not css? then the hints will always be invisible for such a user since they are hidden over css...

to fix this problem I would assign all styles which are used by the js-hints, e.g. display, position etc., over javascript, if you do it like that, the hints are only hidden if js is activated and will degrade nicely otherwise.

or you could assign a class to the form over js if you prefer having the styles in the css-file.

@CSS Guy:

It could be easily done using :focus and the adjacent sibling selector. Something along the lines of:

span { display: none; }
input:focus + span { display: inline; }

of course this will only work in browsers that understand the pseudo selector ':focus' and the adjacent sibling selector '+' (tested and works in FF2)

Knowing my luck it probably says:
Time remaining: NaN

And I could be wrong, infact I would love to be corrected on this...but I think IE7's support for selectors is pretty thin on the ground as well :(

Nice one! Beautiful interface in the front-end -- help when you need it most.

Very nice example. The only thing I'd do differently is give the SPAN tag and the INPUT/SELECT tags some common ID text and instead of looping through all the INPUT/SELECT elements on the page, just grab the one that matches up and display it:

<input
name="firstname"
id="firstname"
type="text"
onfocus="showHint(this.id);"
/>
<span class="hint" id="firstname_hint">Use your real name!</span>

document.getElementBy(element + "_hint").style.display = "inline";

That seems cleaner to me.

Why use definition lists (DL) for this? Hijacking markup that has a specific documented purpose for the convenience of your layout is a bad habit. The LABEL tag can be styled in place of DT and I'd rather see DIVs instead of DD.

I realize Vox set a bad example in that regard, but it might make sense not to propagate this sort of thing in a tutorial.

Thanks for the guide.

Wow, great example. Think I'm going to mess around with this tonight, but as Chris mentioned, using spans for the hints.

Also a great tweak would be to display the hints on mouseover :)

very cool, been looking for this sort of thing for a while now :)

I like this alot. Thanks for the free Java! (can't stand those damned curly brackets)...

Good job! It looks very nice and the tutorial is easy to follow. I really like this site.

I'm trying to find a way, like the VOX link, to keep the hint from hiding when I click on them. I want to be able to put hyperlinks in my hints. Any help?

For cleaner markup you could have used the alt="" attribute on the input for the copy and on focus use javascript to trigger that message in a window. That way you wouldn't have to make use of an unsemantic span.

to get hyperlinks to work, a little reworking needs to be done. Gone is the onblur event.
add input field type="hidden" id="lasthint"

then change the prepareInputsForHints() function to be structured like this:

var inputs = document.getElementsByTagName("input");

for (var i=0; i<inputs.length; i++){

	inputs[i].onfocus = function () {

		document.getElementById("lasthint").value = this.id;

		if(this.parentNode.getElementsByTagName("span")[0])this.parentNode.getElementsByTagName("span")[0].style.display = "inline";

		var newinputs = document.getElementsByTagName("input");

		for (var j=0; j<newinputs.length; j++)

		{

			if (newinputs[j].parentNode.getElementsByTagName("span")[0] && newinputs[j].type != "hidden")

			{

				if(document.getElementById("lasthint").value != newinputs[j].id)

				{

					newinputs[j].parentNode.getElementsByTagName("span")[0].style.display = "none";

				}

			}

		}

	}

}

For what it's worth - with the version you created, the hints only work in the final two fields on Firefox 2.0.0.3 on Mac OS X 10.4.9. However, the Vox example works fine for all fields. Unfortunately I am too much of an ignoramus to tell you why this is.

To save five lines of javascript you could change prepareInputsForHints() to -->
var formElements = ["input", "select"];
for(var g=0; g<formElements.length; g++){
var inputs = document.getElementsByTagName(formElements[g]);
for (var i=0; i<inputs.length; i++){
inputs[i].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
inputs[i].onblur = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}

Hopefully I didn't miss a parentheses. Coding in this textarea is a little tricky.

It cut off a portion of my post. You can create an array of form elements to look for input and select respectively and loop over that rather than coding the same thing twice. DRY.

Thanks for the article; I will give it a try.

Why duplicate so much code? Couldn't you just create one array?

inputs = inputs.concat( document.getElementsByTagName("select") );

One could use :focus and the adjacent sibling selector and although that doesn't work for IE, of course, it also it doesn't work for Safari, although it does work on everything else.

One still could use a Conditional Comment for IE to add the Javascript needed to make it work in IE but that would still leave Safari out in the cold.

CSS Guy: I think Dan means that the hints do not show up nicely in IE. They show up, but it is like the disappearing text trick thing in IE where if you scroll the text suddenly shows up, same with your boxes that the hints are in. (maybe just on our set ups?)

I agree with Chris. Using DT and DD is absolutely no different from using table based layouts. Both are not designed for the purpose of laying out forms.

If you're going to (as Chris put it) hijack HTML, you may as well use the better suited table.

The example is great BTW, I just don't deem it appropriate that you promote the use of illegitimate HTML

This actually highlights a problem I was considereing the other day - is there a way to get rid of that span for the pointer? I like to keep my markup semantic.

My first thought involved removing the left border from the box, and including the border in the pointer image, but this would give you an overlap on the top and bottom borders, and doesn't allow for boxes of varying height.

Any ideas?

Cool idea. Gimmicky in most situations, though. =)

That is pretty slick. I now just have to re-arrange my page so that the "hints" are not over the top of anything...I would also like to play around to get them to match my site better so I have plenty to do...
----
Shredder

WOW!!!! Great stuff!!!! Thanks for sharing the tip!!!

Very nice article!
One thing that came to my mind when reading it is that it's unnecessary to add an extra div just for the pointer. Apply the pointer to the parent div instead (of course the image would need to be modified to fit this purpose; you'd have to add the border and some white yourself and make it about 400px high).

This is very cool.

What do you need to do in order to display different tips if there are two inputs on a single line?

This is a nice tutorial. I have implemented it fully, however I am having a problem when rendering in IE. It seems like IE does not draw the span correctly (borders are missing) the first time, but if the hint is shown and hidden again, it looks proper. Is there a way to force IE to redraw the screen? I also noticed that the Vox implementation does not have this problem, but their javascript is too cryptic for me!

Quote from Yeago:
"Gimmicky in most situations, though. =)"

Yeah, maybe it's gimmicky if you use it on obvious fields just for the sake of using it (like Vox).

But wonderful for offering hints w/o mucking up the initial view of the form with instructional text and in-line examples. It can mean the difference between making a form look simple vs. complicated and time consuming. Completed sign-up forms translates into dollars for most folks running an online business!

The "IA" Lives.

A co-worker pointed me to this site to ask me what I thought of this form feature. I thought it was cool...uh...until I observed that it had that IE6 bug. Hah! And about 90% of our site visitors are still using IE6. So...I began playing with the coding.

This is what I came up with...and (at least on my local computer and development center for my network) appears to work for IE6/7/FF2. And don't ask me why, but by leaving out - what should and WOULD be considered proper - attributes for the classes used, things snapped to...AND...even MORE peculiar, I was forced (in my fix) to HAVE to place the "background-color" property directly in the "hint" SPAN...go figure.

In any case...it seems to work. Awesome job of coding CSS Guy!

CODING::: (core elements, only)

<style type="text/css">
/* The hint to Hide and Show */
.hint {
position: absolute;
display: none;
right: -250px;
width: 200px;
margin-top: -4px;
border: 1px solid #c93;
padding: 10px 12px;
color:#000000;
background-color: #ffc;
background: url(http://images.automart.com/imgs/design/ag/agonyx/autoblue/focused-left.gif);
background-position:-10px 5px;
background-repeat:no-repeat;
}

/* The pointer image is hadded by using another span */
.hint-pointer {
position: absolute;
left: -10px;
top: 5px;
width: 10px;
height: 19px;
background-color: #f2fcf1;
background: url(pointer.gif);
}
</style>

<script type="text/javascript">/* Not included in this submittal; however, no changes from original scripting. */</script>

<dl>
<dt>
<label for="firstname">First Name:</label>
</dt>
<dd>
<input
name="firstname"
id="firstname"
type="text" />
<span class="hint" style="background-color: #ffc;">This is the name your mama called you when you were little.<span class="hint-pointer"> </span></span>
</dd>
<dt class="button"> </dt>
<dd class="button">
<input
type="submit"
class="button"
value="Submit" />
</dd>
</dl>

...hope this was helpful.

Hey...was glad to help. Especially given that I have hopes of using this cool utility on my companies 2 sites. If you have no objections, that is. :-)

I'll let you know if & when my Product Development team approves my desired use for this tool, so's you can take a look-see.

Thanks for cleaning up my foo-pah coding. :-))

Best Regards, David

Well done!!!

A question: how i can use a hint window in a textarea?

Thank you!

Nice writeup. I wonder if the Vox folks are wondering why so many folks are getting to their registration page and failing to sign up. They'll probably change their form or something ("I told you those javascript thingies were going to break folks' browsers!"). ;)

A coworker (that did the css on the regform) gave me the link to this post. I did the js on vox, btw. ;) Good writeup on the technique!

Cheers
David

great stuff.

really appreciated your understandable writing, and even though I didn't have a lot of knowledge about javascript, i got it ;)

Hi

I'm trying the last example which should have the IE6 fix, but still, using IE6, it does not mark up the whole border first time focusing on an input field.
http://www.askthecssguy.com/examples/formfieldhints/example06.html

Anyone who can confirm this?

How do I add 2 form field together. If I cheage the following from * to + I dont get the total but a combination of the 2 numbers
such as 2 + 3 = 23

var Total = Units * Rate

<html>
<script javascript>
<!-- Begin
//
// Server Side Code Would Be Required Above Script To Set Text Field Values From Database on OnLoad()
//

function DoMath(){
var Units = document.frmData.Units.value
var Rate = document.frmData.Rate.value
var Total = Units * Rate
document.frmData.Total.value = Total
}
<!-- End
</script>
<body onload="DoMath()">
<form name="frmData" method="POST" >
Units:<br>
<input type="text" onchange="DoMath()" name="Units" size="20"></p>
<p>Rate:<br>
<input type="text" onchange="DoMath()" name="Rate" size="20"></p>
<p>Total:<br>
<input type="text" name="Total" size="20"><br>
<input type="button" onclick="DoMath()" value="Update" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
</body>
</html>

@Steve:
you are trying to add strings, not numeric values. Take this code instead:

var Units = eval(window.document.frmData.Units.value);
var Rate = eval(window.document.frmData.Rate.value);

A nice understandable writeup!
Is there anywhere that the addloadevent code is explained. I know little JS and tend to come unstuck when trying to combine different techniques from different sources in one page.

I also would like to place links in the hint so thanks also to Matthew Davidson.

thanks for the interesting article.

what's wrong with using title-attributes on each input? they are accessible, don't need JS or CSS, and they work on mouseover.

too easy?

Excellent tutorial, and some great feeback in the comments.

To stefan: I'd be tempted to use the title tag too, but in our experiments @ work, the title tag only allows a maximum of 255 characters in some browsers. Also, adding extra markup to the title tag (such as strong tags, paragraphs etc.) behaves oddly in older browers.

As to the popup technique as presented here, I'd be tempted not to use display: none; in the stylesheet so the tips appear by default when javascript isn't available. You could augment the script to add display: none; when it runs.

Very nice approach, but having to embed the <span class="hint-pointer"> </span> with each hint is not very designer-friendly. However, there is no reason why the JS that hooks up the events shouldn't at the same time inject the pointer span.

If you use the following as a replacement for your prepareInputsForHints() function, the hint-pointer spans will be added automagically. And the code will check for hints for input, select and textarea controls.

function prepareInputsForHints() {
    var tags = ['input', 'select', 'textarea' ];
    for(var t = 0; t < tags.length; t++) {
        var inputs = document.getElementsByTagName(tags[t]);
        for (var i=0; i<inputs.length; i++){
            connectInputHint(inputs[i]);
        }
    }
}
 
function connectInputHint(input) {
    var span = input.parentNode.getElementsByTagName("span")[0];
    if(span) {
        // Add pointer
        var pointer = document.createElement('span');
        pointer.className = 'hint-pointer';
        pointer.innerHTML = ' ';
        span.appendChild(pointer);
 
        // Hook up events
        input.onfocus = function () {
            span.style.display = "inline";
        }
        input.onblur = function () {
            span.style.display = "none";
        }
    }
}

Good article :-)

The example (vox) seems to have removed the "Hints" :-) check it!

I love this example and I'm gonna use it but I still have the problem of getting it to work in IE6. If someone finds another soulution please post it here..Thanks..

This is pretty cool, it'll be nice when ie 6 and other browsers that might not support this are no longer a sizable %.

I had to remove the "display: none;" from the CSS definition for .hint-pointer {} to get this to work. Might be a typo in your article.

Great script though.

Very useful! Thanks!

Its very cool. Keep posting more.

Very useful, thanks for the information. Love the site, very informative

First off, excellent article!
I'm running IE6 and still seem to have a display issue with the examples. The first on-blur event is displayed with some or no boarders, the next time its ok.

I did a little playing and it seams when i commented out the "position: absolute" from the css class ".hint-pointer", it solved the boarder display issue. Of course by doing this you lose the ability to position the pointer!

I did a bit of playing with the script and come up with this as a work-around:
I replaced the pointer span with a div and moved it to the beginning of the hint span.
I edited the ".hint" style so there was padding on all sides except the left.
Then used "position: relative;" in the ".hint-pointer" style to move the pointer.

Some people are probably going to curse at me for the way i have set this up, but hey......it works for me.

Can anyone confirm that they are having trouble with the original version but my work around is working for them?

A temporary example

for accessibility (well screen readers) should you not have the form hint before the input field?

this link has a nice example maybe someone can have a play and incorporate???

http://simplyaccessible.org/assets/formexample-errormessages.html

for accessibility (well screen readers) should you not have the form hint before the input field?

this link has a nice example maybe someone can have a play and incorporate???

http://simplyaccessible.org/assets/formexample-errormessages.html

thanks you

Hello! Great example! I've found it very useful. However. I was wondering if there was a way to make it show the hints when someone hovers their mouse over a table row?

Thanks!

Hi There! I was able to get this to work on mouseover with table rows using the following code:

  var tableRow = document.getElementsByTagName("tr");
  for (var m=0; < tableRow.length; m++){
    if (tableRow[m].getElementsByTagName("span")[0]) {
      tableRow[m].onmouseover = function () {
        this.getElementsByTagName("span")[0].style.display = "inline";
      }
      tableRow[m].onmouseout = function () {
        this.getElementsByTagName("span")[0].style.display = "none";
      }
    }
  }  

You then just add the span with the hint in the LAST column of each row you want to have a hint in. You'll also have to make some minor changes to the CSS.

You''ll also note that I added an "if" statement. I would suggest adding this to all the other for loops as this will eliminate all the javascript errors that can occur if every row doesn't have a span tag.

For our implementation we also wanted to be able to dynamically turn the context help on or off. To do this I created a toggle function which depending on the current value of a cookie, toggled the code so that it set the EVENTs back to null.

Thanks for this great tutorial!

Hi There! I was able to get this to work on mouseover with table rows using the following code:

  var tableRow = document.getElementsByTagName("tr");
  for (var m=0; < tableRow.length; m++){
    if (tableRow[m].getElementsByTagName("span")[0]) {
      tableRow[m].onmouseover = function () {
        this.getElementsByTagName("span")[0].style.display = "inline";
      }
      tableRow[m].onmouseout = function () {
        this.getElementsByTagName("span")[0].style.display = "none";
      }
    }
  }  

You then just add the span with the hint in the LAST column of each row you want to have a hint in. You'll also have to make some minor changes to the CSS.

You''ll also note that I added an "if" statement. I would suggest adding this to all the other for loops as this will eliminate all the javascript errors that can occur if every row doesn't have a span tag.

For our implementation we also wanted to be able to dynamically turn the context help on or off. To do this I created a toggle function which depending on the current value of a cookie, toggled the code so that it set the EVENTs back to null.

Thanks for this great tutorial!

Too many comments to read through, but the article still has an error so I guess it hasn't been brought up. In the .hint .hint-pointer rule, you have display:none in there, but it shouldn't be. :)

Good job! It looks very nice and the tutorial is easy to follow. I really like this site.

good text. thank yoouuu

thanks good text

Excellent article... now how can we kill IE6? It should have been dead a long time ago - but yet there it is causing us all kinds of headaches!

Hello CSSGuy,
thanks for the tip on the tooltip. ;)
I tried it and it works fine but W3c validation failed on javascript:
line 70 column 30 - Erreur: character ";" not allowed in attribute specification list
line 70 column 30 - Erreur: element "inputs.length" undefined
line 85 column 31 - Erreur: character ";" not allowed in attribute specification list
line 85 column 31 - Erreur: element "selects.length" undefined
line 97 column 8 - Erreur: end tag for "selects.length" omitted, but OMITTAG NO was specified
line 85 column 16 - Info: start tag was here
line 97 column 8 - Erreur: end tag for "inputs.length" omitted, but OMITTAG NO was specified
line 70 column 16 - Info: start tag was here

How can it be fixed (if it can)?

thanks good text