Can I set a different style for <a title="" /> or <img title="" />?

Ciao,

In <a href="http://index.html" title="Go to the homepage">Homepage</a>
or in
<img src="paris.jpg" alt="Two children running in front of the Eiffel
tower" title="Paris, 2008">,
using only css, I would like to set a different text-color or
background-color for the 'title box' that appears when i do a rollover
on the link or the image (Firefox default is a black text on a yellow
background box).

Is it possible?

Thank you very much

On 2008-03-16, Lorenzo De Tomasi <lorenzo.detomasi (AT) gmail (DOT) com> wrote:

Ciao,

In <a href="http://index.html" title="Go to the homepage">Homepage</a
or in
img src="paris.jpg" alt="Two children running in front of the Eiffel
tower" title="Paris, 2008">,

using only css, I would like to set a different text-color or
background-color for the 'title box' that appears when i do a rollover
on the link or the image (Firefox default is a black text on a yellow
background box).

Is it possible?

The 'title box' is part of the browser and not standard. You can't style
it per se. But you can make your own title box, something like this:

a { position: relative }
.popup
{
position: absolute;
top: 1em;
left: 1em;
background-color: palegreen;
color: red;
visibility: hidden;
white-space: nowrap;
border: 1px solid green;
}
a:hover .popup { visibility: visible }

...

<a href="#">Homepage<span class="popup">Go to the homepage</span></a>

May not work in IE.

Scripsit Lorenzo De Tomasi:

In <a href="http://index.html" title="Go to the homepage">Homepage</a
or in
img src="paris.jpg" alt="Two children running in front of the Eiffel
tower" title="Paris, 2008">,
using only css, I would like to set a different text-color or
background-color for the 'title box' that appears when i do a rollover
on the link or the image (Firefox default is a black text on a yellow
background box).

Is it possible?

No, it isn't, since the "tooltip text" does not even exist in CSS terms.
You can refer to the text as text in CSS rules in certain ways but you
cannot describe its rendering in CSS, since there need not be any
default rendering for it and if there is, it cannot be referred to in
CSS.

Before starting to consider some special techniques that may create a
"mouseovet effect" in addition to and independently of browsers'
eventual "tooltip texts", consider whether it would be useful and
whether it would be worth the effort. Note that the costs include
potential user confusion. Anything that _looks_ like a popup window is
suspicious to many people, and things that pop up and out may confuse a
screen reader or a user's mind.

For example, "Go to the homepage" is just a nuisance and doesn't resolve
the issue what the link really points to. Instead of "Homepage", use a
descriptive link text like the company's name (followed by " main page",
if pointy-haired bosses insist on your being pointlessly verbose). Thus,
the need for any "mouseover effect" vanishes in a puff of logic.

Similarly, title="Paris, 2008" is pointless. If the information matters,
put it below the image as normal text, though perhaps styled to be
different from copy text, centered, etc., to look like a caption or
description (see http://www.cs.tut.fi/~jkorpela/www/captions.html ). And
if it does not matter, leave it out. The alt="..." attribute in <img> is
even more pointless. Who is it for? Traditionally, alt attributes have
been described as helping blind people who do not see images. Would you
like to listen to (or read with your fingertips) babbling like "Two
children running in front of the Eiffel tower"?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On Sun, 16 Mar 2008 16:36:11 +0100, Jukka K. Korpela <jkorpela (AT) cs (DOT) tut.fi>
wrote:

Scripsit Lorenzo De Tomasi:

In <a href="http://index.html" title="Go to the homepage">Homepage</a
or in
img src="paris.jpg" alt="Two children running in front of the Eiffel
tower" title="Paris, 2008">,
using only css, I would like to set a different text-color or
background-color for the 'title box' that appears when i do a rollover
on the link or the image (Firefox default is a black text on a yellow
background box).

Is it possible?

No, it isn't, since the "tooltip text" does not even exist in CSS terms.
You can refer to the text as text in CSS rules in certain ways but you
cannot describe its rendering in CSS, since there need not be any
default rendering for it and if there is, it cannot be referred to in
CSS.

Before starting to consider some special techniques that may create a
"mouseovet effect" in addition to and independently of browsers'
eventual "tooltip texts", consider whether it would be useful and
whether it would be worth the effort. Note that the costs include
potential user confusion. Anything that _looks_ like a popup window is
suspicious to many people, and things that pop up and out may confuse a
screen reader or a user's mind.

For example, "Go to the homepage" is just a nuisance and doesn't resolve
the issue what the link really points to. Instead of "Homepage", use a
descriptive link text like the company's name (followed by " main page",
if pointy-haired bosses insist on your being pointlessly verbose). Thus,
the need for any "mouseover effect" vanishes in a puff of logic.

Similarly, title="Paris, 2008" is pointless. If the information matters,
put it below the image as normal text, though perhaps styled to be
different from copy text, centered, etc., to look like a caption or
description (see http://www.cs.tut.fi/~jkorpela/www/captions.html ). And
if it does not matter, leave it out. The alt="..." attribute in <img> is
even more pointless. Who is it for? Traditionally, alt attributes have
been described as helping blind people who do not see images. Would you
like to listen to (or read with your fingertips) babbling like "Two
children running in front of the Eiffel tower"?

Might I object to your last statement? There have been cases when I was
blessed with a VERY slow internet connection (traveling with a laptop,
with no other option then a mobile phone on a very slow network to get
online). In those cases, I usually don't let the images download at all,I
do see their ALT texts though, and the ALT text lets me clearly see what
images are of importance to the job at hand, and which aren't (images
might be just an illustration of a story to pretty it up, in which case
they usually aren't of any importance, they may however show schematics of
graphs, which could be vital). Based on those alt descriptions, I can
choose to download/show the image. More importantly: if someone was clumsy
enough to choose images for navigation, a decent ALT text let's me clearly
see what part of a website the image is supposed to link. Even if I did
try to download the images at low speeds like that, I'd like to be able to
see what content is about instead of endlessly waiting for everything to
load before a (part of a) page makes sense.

Ofcourse, when talking about the visually impaired, the first use
mentioned will be of no importance to them, as they will never be able to
see the image. The second one though could be vital, especially since some
trend seems to be to have big flashy 'button' style links in webpages to
important parts nowadays.

I'm in no place to comment on current state of affairs on the net for the
visually impaired, as my eyesight is good enough and I have never had the
need to explore current programs/applications like screenreaders. I do
however make sure my documents are logical, readable, and usable without
any styling and images applied where possible.
--
Rik Wasmus

Rik Wasmus wrote:

Might I object to your last statement? There have been cases when I was
blessed with a VERY slow internet connection (traveling with a laptop,
with no other option then a mobile phone on a very slow network to get
online). In those cases, I usually don't let the images download at all,
I do see their ALT texts though ...

The OP was asking about the TITLE text, not the ALT text. The two are
not the same. Your argument is valid, but only for for the ALT text.

On Sun, 16 Mar 2008 18:07:48 +0100, C A Upsdell <cupsdell (AT) upsdell (DOT) invalid>
wrote:

Rik Wasmus wrote:
Might I object to your last statement? There have been cases when I was
blessed with a VERY slow internet connection (traveling with a laptop,
with no other option then a mobile phone on a very slow network to get
online). In those cases, I usually don't let the images download at
all, I do see their ALT texts though ...

The OP was asking about the TITLE text, not the ALT text. The two are
not the same. Your argument is valid, but only for for the ALT text.

That's why I responded to Jukka Korpola, saying 'Might I object to your
last statement?', his last statement (which you removed) being: "The
alt="..." attribute in <img> is even more pointless.".

I do grant you we are getting way offtopic. The OP has allready been
answered: one can't style the UA-specific 'popup' text generated by the
title (or sometimes alt) attribute.
--
Rik WasmuJ

Scripsit Rik Wasmus:

Would
you like to listen to (or read with your fingertips) babbling like
"Two children running in front of the Eiffel tower"?

Might I object to your last statement?

You may, but why did you then quote everything above it, too?

There have been cases when I
was blessed with a VERY slow internet connection

Don't make me started about my past 110 bps connections. (Just joking.
It was soon upgraded to 300 bps. And it wasn't internet connection yet.)

In those cases, I usually don't let the
images download at all, I do see their ALT texts though, and the ALT
text lets me clearly see what images are of importance to the job at
hand, and which aren't

Assuming that you rely on the ALT texts, and we usually can't.

But while you have a point there, ALT texts that just describe the
contents of a more or less decorative or "atmosphere-creating" image
_are_ a nuisance to people who really _need_ ALT texts. For you and me,
ALT texts are probably just a convenience, so our interests should be of
secondary importance.

The general idea (rather explicit in HTML specs, though not crystal
clear) is that an ALT attribute for an IMG element _shall_ specify the
textual _replacement_ for the image whereas a TITLE attribute _may_
additionally be used to supply an "advisory title". Modern browsers use
the TITLE attribute value, if present, as "tooltip", and assistive
software used by the blind (and other people) often gives the user
optional access to TITLE, in addition to ALT. This would be fine if
authors used these attributes reasonably.

In CSS terms, these attributes are not very interesting. You could use
CSS to generate, for example, a visible presentation of a TITLE (or ALT)
attribute value after an image, but
a) this still won't work on IE
b) it's of limited usefulness, since on the authoring side, you have
better options (which I described) to present relevant texts, and on the
user side, in a user style sheet, you won't achieve much since the ALT
and TITLE attributes are so often garbage or worse (though this _might_
be feasible when you don't want to download all images automatically -
it might still be useful often enough).

More importantly: if someone was clumsy
enough to choose images for navigation, a decent ALT text let's me
clearly see what part of a website the image is supposed to link.

That's a completely different issue, and generally it's a situation
where an image should not have been used in the first place - especially
in the modern world, where you can use CSS to style a textual link in
many ways (setting font and color and making it look like a button if
you like etc., and creating mouseover effects in a simple way).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

In article <v7bDj.311394$DM4.86788 (AT) reader1 (DOT) news.saunalahti.fi>,
"Jukka K. Korpela" <jkorpela (AT) cs (DOT) tut.fi> wrote:

Traditionally, alt attributes have
been described as helping blind people who do not see images. Would you
like to listen to (or read with your fingertips) babbling like "Two
children running in front of the Eiffel tower"?

Many blind people do appreciate information about the visual
world and this can reach into quite unexpected quarters. I
suggest, for those who do not understand quite what this can
involve, to see the nice Australian film "Proof".

After seeing it, if you still do not understand how alt text
might add something to the aesthetic imagination and enjoyment of
a visually blind person, then come back and I will think of
further avenues to remove your intellectual blinkers.

(We will be taking this matter up tomorrow morning JK, in your
kf, I like those plain Finnish croissants more. I am not saying
the cinnamon ones are not nice. They are. But I like the plain
buttery ones better. I know you won't mind this little gentle
hint. About the croissants, that is.)

--
dorayme

Jukka K. Korpela schrieb:

The general idea (rather explicit in HTML specs, though not crystal
clear) is that an ALT attribute for an IMG element _shall_ specify the
textual _replacement_ for the image whereas a TITLE attribute _may_
additionally be used to supply an "advisory title".

And the longdesc attribute may be used to link to a resource that
_describes_ the image.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Scripsit Johannes Koch:

And the longdesc attribute may be used to link to a resource that
_describes_ the image.

And it is useless except to a small fraction of users who use a browser
that makes some use of that attribute. It's hard to imagine a situation
where the description would be useful to them but not to all other
users.

ObCSS: You can use CSS to style a _normal link_ to such a description,
in order to make it sufficiently non-disturbing and yet noticeable.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/