Question

I’m trying to display contextual help alongside form fields, that is only visible when those fields are in focus or hovered over. I’ve tried using mere CSS, but the results seem very fragile and inconsistent.

Here is my CSS:

form .instruct {     position: absolute;     right: -220px;     top: 10px;     visibility: hidden;     width: 200px;     z-index: 1000; } form li:focus .instruct, form li:hover .instruct {     visibility: visible; } 

In my markup, I’ve given my form some structure using an ordered list, grouping each field with it’s instructions in a li element:

<form>     <ol>         [...]         <li>                 <label for='message'>Message</label>                 <textarea id='message' name='message'></textarea>                 <div class='instruct'>                     <p>Instructional text and <a href='#'>Formating help.</a></p>                 </div>         </li>         [...] 

The instructions appear when hovering over the field, but not when the field is in focus– and if the mouse moves to select a link in the contextual instructions, they disappear.

Each field has it’s own instructions, and I need each one to appear when the appropriate field is in focus or hover state.

I thought this might be a case where jquery could make life easier. Is there a quick way to accomplish this? If there’s a reliable way to do this using raw CSS, I’d be happy with that too.

Thanks!

Answer 1

Updated with blur event for you

   $(function()    {         $('.instruct').hide(); //hide          $('#message').focus(function(){               $('.instruct').show(); //show         }).blur(function(){               $('.instruct').hide(); //hide again         });    });