Pure css contextual help

Pure css contextual help

Hi all,

I have received a development specification that requires contextual help for each filed in a submission form.

I have performed several searches through google for a pure css solution without any luck (I have found solutions that include both css and javascript).

Before I implement a solution that uses javascript, do any CSS experts have any ideas for a pure css context help solution?

Thanks in advance... Andy

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

What do you exactly mean by context help? Give an example please.
If by contextual help you mean make appear a box containing explanation about the current field, i don't see any possibility with pure CSS.
You will have to use JavaScript to position a DIV element and to make it show/disappear.
CSS will enable you to customize the appearance of your DIV, maybe its position, but won't enable you to make it appear on mouseover or focus on a specific field.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
smaccari is right.  CSS is only for design and layout, not content.  You can minimize the javascript required by only having it load the text into a div, and control the rest of it with css.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

andycwkAuthor Commented:
I have a div that appears on the page that has some help for the form section, at the bottom of this div is a further div/span that the contents of which will change depending on the active input field.
I was wondering if maybe a activeField:hover could effect the display settings of a different element.

smaccari, noamattd,
I had a feeling that CSS would not perform the actions that I desired, but I needed to know for sure before dismissing it.

I will wait to see if huji has anything further to say before I close the question and assign points.


You can not change an element style with a CSS rule applied to another one.
The activeElement:hover rule will affect only the element being mouse overed.

The only way to do what you need is through JavaScript, with a mouseover event handler.

If you want a div's content to be contextual depending on what field is active, you'll need to use javascript and the onfocus/onblur event handlers for each field.  Again, you can minimize the effort by having javascript just inject the content and letting your CSS take care of styling it.  If you feel like you'll be doing a lot of stuff like this and need to learn javascript I'd recommend picking up The Definitive Guide to Javascript : http://www.amazon.com/gp/product/1565923928/002-2537117-8544806?v=glance&n=283155

It's what I use and it's been a very useful book to learn from/use as a reference.
andycwkAuthor Commented:
Hi noamattd,

Thanks for your concern regarding my javascript capabilities... I already have sufficient skills to use javascript for the implementation ;)
Then use them, my friend!  Use them well!
andycwkAuthor Commented:
hmm... Do I sence some hostility... never mind :P thanks for the help :)
>> huji, I have a div that appears on the....
I was away when all the discussion happened. I agree with the other people. With CSS (at least the version supported by current browsers) you can not affect other DIVs when an object is moused over (or mouse overed! I'm not sure which one is correct!) You need to use your javascript skills for that, and I reckon it is very easy for you to do that. However, we are here to help you, in case.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.