image alt style pop up for text

[mr_burns]

hi,

in html, how do i create a pop up description box for text. i want, in
the same way that when you write the image alt tag and the user rolls
the cursor over the image a pop up box appears, but for text. any
help?

cheers

burnsy

[Chris Morris]

bi******@yahoo.co.uk (mr_burns) writes:

in html, how do i create a pop up description box for text. i want, in
the same way that when you write the image alt tag and the user rolls
the cursor over the image a pop up box appears, but for text. any
help?

1) There's no such thing as an alt _tag_. You mean alt attribute.

2) That's not what the alt attribute is for, read
http://ppewww.ph.gla.ac.uk/%7Eflavell/alt/alt-text.html

Mozilla and other recent browsers do not display the alt attribute
when the image is being displayed.

3) You want the title attribute (can be used on images too)
<p title="description"> ... </p>
<img src="logo.jpg" alt="Widget Corp." title="Providing Widgets Worldwide">

--
Chris

[Mark Tranchant]

mr_burns wrote:

in html, how do i create a pop up description box for text. i want, in
the same way that when you write the image alt tag and the user rolls
the cursor over the image a pop up box appears, but for text. any
help?

<span title="Popup text">blah blah</span>

....or any other element you want. Assign a class to the element, and
style it so that the user knows to mouseover it. See also <abbr> and
<acronym>.

--
Mark.
http://tranchant.plus.com/

[Alan J. Flavell]

On Fri, 6 Aug 2004, Mark Tranchant wrote:

<span title="Popup text">blah blah</span>
Good answer, as far as it goes ;-)
...or any other element you want.
Yes, preferably, *any* other element, if there's an appropriate one.
Keep <span> as the last resort. Don't you agree?
Assign a class to the element, and style it
so that the user knows to mouseover it.
A dotted box seems to be a fairly conventional clue. I'm not sure
I can think of a better one. Cursor=help is no use by itself, if the
user had no motive to go mousing over it anyway - this is supposed to
be information, not a treasure hunt (as I'm sure you'd agree, right?)
See also <abbr> and <acronym>.

Fine things, in theory, yes. But IE refuses to support <abbr>, and
quite what an <acronym> is exactly, has been the topic of numerous
acr..ymonious (sorry!) arguments, unfortunately. (Which I'd rather
not start all over again here, thanks ;-)

But don't forget <dfn title="defining instance">dfn</dfn>

I give you, for instance:

abbr, acronym, dfn, .abbr { border: 1px dotted #666;
background-color: #eee; color: #030;
border-top: none; cursor: help; }

with non-acronym abbreviations done as e.g
<span class=abbr title="Windows Task Force"><abbr
title="Windows Task Force">WTF</abbr></span>
on the days when I'm feeling generous towards IE users.

all the best

(Yes, it -was- meant to be a joke)

[Neal]

On Fri, 6 Aug 2004 16:09:39 +0100, Alan J. Flavell <fl*****@ph.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'd use just a dotted underline. Left and right margins on inline elements
get weird when wrapped.

[Jukka K. Korpela]

(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.)

Neal <ne*****@yahoo.com> wrote:

On Fri, 6 Aug 2004 16:09:39 +0100, Alan J. Flavell
<fl*****@ph.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/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

[Jukka K. Korpela]

(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 <ne*****@yahoo.com> wrote:

On Fri, 6 Aug 2004 16:09:39 +0100, Alan J. Flavell
<fl*****@ph.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/

[Sam Hughes]

"Jukka K. Korpela" <jk******@cs.tut.fi> wrote in
news:Xn*****************************@193.229.0.31:

Neal <ne*****@yahoo.com> wrote:

On Fri, 6 Aug 2004 16:09:39 +0100, Alan J. Flavell
<fl*****@ph.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.