Style to indicate that popup info is available

(Discussion started in c.i.w.a.h. under Subject "image alt style pop up
for text", now changed to discussing the use of a title="..." attribute
to create a popup info text, and how to make it obvious to users that
there _is_ some info available.)
(Now crossposted, with followups set to c.i.w.a.stylesheets.)

Neal <neal413 (AT) yahoo (DOT) com> wrote:

On Fri, 6 Aug 2004 16:09:39 +0100, Alan J. Flavell
flavell (AT) ph (DOT) gla.ac.uk> wrote:

A dotted box seems to be a fairly conventional clue. I'm not sure
I can think of a better one.

I hadn't heard of the convention before, but it sounds reasonable.

I'd use just a dotted underline.

I guess you mean a dotted bottom border. I don't know of any way, in
HTML or CSS as currently specified and generally implemented, to create
a dotted underline proper. But bottom borders can be used to simulate
them. (They are still different beasts. Underlining is at the baseline
level, or just a little lower, whereas bottom border is below the
element as a whole, which means that it's below all descenders.)

But a dotted bottom border is some browsers' default rendering of
<abbr> and <acronym> elements. This may cause confusion: users
accustomed to such rendering might get the correct clue "there's info
available, if you move the pointer over this piece of text" - but
perhaps also the incorrect clue "this is an abbreviation or an
acronym". Besides, people who are _not_ familiar with such rendering
might assume that the border is some variation of _link_ underlining.

Left and right margins on inline elements get weird when wrapped.

I wonder what you mean by such effects. Rather, the top and bottom
border might be disturbing by making adjacent text less readable and
even partly covering it - or borders for other elements.

But there are other problems. Using just e.g.

..titled { border: dotted black thin; }

(together with class="titled" for each element that has title="...";
yes, we would like to be able to use just a [title] selector, but let's
get real) would make the text inside virtually hit the left and right
border, so we need some left and right padding. Moreover, the border is
often _too_ noticeable, drawing too much attention. Changing the color
to some shade of grey would help a little, but probably not enough.
Making it 1px instead of thin would appear to be natural, though
naturally px values should be avoided (a 1px border looks ridiculous
when the font size is very large, say 60px). More importantly, IE does
not support a 1px dotted border but makes it dashed. Would this be
acceptable?

We might also make the border color different from text color, to avoid
any undesired effect on text legibility (especially when the border
becomes dashed - a dash might look too much like an "i" or "l").

So what I would currenly use is

@media screen {
..titled { border: dotted #090 1px;
padding: 0 0.1em; } }

--
Yucca, http://www.cs.tut.fi/~jkorpela/

"Jukka K. Korpela" <jkorpela (AT) cs (DOT) tut.fi> wrote in
news:Xns953DE966CCBFEjkorpelacstutfi (AT) 193 (DOT) 229.0.31:

Neal <neal413 (AT) yahoo (DOT) com> wrote:

On Fri, 6 Aug 2004 16:09:39 +0100, Alan J. Flavell
flavell (AT) ph (DOT) gla.ac.uk> wrote:

A dotted box seems to be a fairly conventional clue. I'm not sure
I can think of a better one.

I hadn't heard of the convention before, but it sounds reasonable.

I'd use just a dotted underline.

[...]

But a dotted bottom border is some browsers' default rendering of
abbr> and <acronym> elements. This may cause confusion: users
accustomed to such rendering might get the correct clue "there's info
available, if you move the pointer over this piece of text" - but
perhaps also the incorrect clue "this is an abbreviation or an
acronym". Besides, people who are _not_ familiar with such rendering
might assume that the border is some variation of _link_ underlining.

Then instead of using a dotted underline, a dashed underline could be
appropriate. People might think, "there is a tooltip," while noticing that
it is different from abbr and acronym styling.


--
In a room with thirty-seven people, never have everybody shake each other's
hand.