I would like to start adding supporting information to my website to help users out in areas where my design may not be clear.
The way I was hoping to do this, is to place (What is this?) hyperlinks next to problem areas.
My questions is, “What should users expect to see when they click on such a link?”
1.) A new web page?
2.) A pop-up mini web page?
3.) Something else?
I do NOT do JavaScript, and I want something simple and that is very accessible and well supported.
In the old days, I would have expected a mini pop-up window with a definition or instructions, but it seems like in 2012 that pop-up windows are all but dead unless I am wrong about this?! :-/
Thanks,
Debbie
P.S. Maybe Ralph can make some more #bada55 color-scheme suggestions too?!
Popups have accessibility issues, but the problem here is that if you are half way through filling out a form, you don’t want the help info link taking you to a new page, as you’ll most likely wipe the form. One option that’s worth considering is to have the explanation in the HTML on the page and hide it from sighted users until they hover/tab over the “what’s this” link.
I think you need some #coffee, or perhaps, if you want to be a real #101ca7, you could tell #a11 your past #b055e5 to #fac0ff. Mind you, all this decoration is really an unnecessary #facade. It’s time to get back to the #0ff1ce and stop wasting time. (Only a #deaded would continue with this post. I feel so #de5018. I should get a job as a #cabbee. Hope I haven’t landed myself in #d00d00. )
I would like to see just a nice small css styled popup “container” (div or whatever) showing a brief text description. This is very easy to do with just html and css since you don’t do javascript. You could use css positioning to put the container where you like relative to the item it refers to. Hide the container by default in the css and use the css pseudo class :hover to display the container when the user hovers over “What is this?”.
It doesn’t get much simpler, is accessible and well supported by all browsers
Is there a way to have a mini pop-up window appear that doesn’t block the background, and won’t get killed by pop-up blocker software?
One option that’s worth considering is to have the explanation in the HTML on the page and hide it from sighted users until they hover/tab over the “what’s this” link.
I’m not following you…
How would you do that?
Have a sample of what you mean?
[ot]
I think you need some #coffee, or perhaps, if you want to be a real #101ca7, you could tell #a11 your past #b055e5 to #fac0ff. Mind you, all this decoration is really an unnecessary #facade. It’s time to get back to the #0ff1ce and stop wasting time. (Only a #deaded would continue with this post. I feel so #de5018. I should get a job as a #cabbee. Hope I haven’t landed myself in #d00d00. )
I have no clue of what you are saying?! I think you just became 15 years younger after that post?![/ot]
With ralph_m’s suggestion, the explanation container appears even when you hover to the right of the <a> because it is set as a block level element which takes up 100% of the parent’s width.
I would do something like this.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#div1 {
position: relative;
width: 100px;
}
#tooltip {
position: absolute;
top: 0px;
left: 100px;
display: none;
width: 200px;
border: 1px solid red;
max-height: 150px;
overflow: auto;
}
#div1:hover #tooltip {
display: block;
}
</style>
</head>
<body>
<div id="div1">
What's this?
<div id="tooltip">
Vitae quis risus enim. Suspendisse a nulla a, vestibulum eros suspendisse. Magna wisi a ad molestie dolor. Quam vel mollis nulla
pharetra. Qui congue inceptos ut vehicula, feugiat ultricies in pellentesque eu, eros aliquid vel nec dis, risus quis feugiat
vestibulum praesent at. Ut nam aenean eu, etiam nonummy etiam tortor, arcu augue urna proident donec mattis praesent, vel commodo
nulla habitasse sapien ullamcorper condimentum. Ipsum nunc leo dictum magna molestie enim, lacus est, ante habitasse scelerisque
dolor leo sodales erat, tristique dapibus nulla vehicula elementum mauris velit, felis a est.
</div>
</div>
</body>
</html>
You could use the title attribute, but I use it only when the text in it is no more than about 10 words max. Also afaik you can’t style the title display. Using a popup div you can include what you like in it - text, images, other links etc - and make it look however you like. Using the title attribute, you cannot do that.
Post an example of the most content you will have to display when the “What’s this?” link is hovered on.
Also, do you want the “explanation” to appear on users’ tablet devices where hover is not supported. If yes and since you say you don’t do javascript then your options for those users is pretty limited. Just something you might need to consider depending on who you are aiming your web site at.
Could I use the technique you showed me to replace the TITLE attribute if need be?
(TITLE is pretty controversial, and not very well defined.)
My OP was for things like ToolTips/How-To’s/Educational info, so for those, obviously I’d use your suggestion, Ralph.
But what if I had something simple like I have a Red Flag - to report comments - and I wanted to use your - what are we calling it? - instead of the TITLE attribute?
)
The slightest bit of encouragement and he’s off. 
I think you just became 15 years younger after that post?![/ot]