tooltips using css in picture gallery are hidden by pictures

[Peter Müller]

I have put my photos inside a table. Now I tried to add tooltip
displaying further information about the selected photo. No I hav the
problem that the shown tooltips are hidden by other photos of the
gallery. And therefore the tooltip is useless. Here is my style definition:

a, .tipp {
position: relative;
}

a span, .tipp span {
display: none;
font: 11px arial,helvetica,sans-serif;
color: #000066;
}

a:hover, .tipp:hover {
background-color: white;
}


a:hover span, .tipp:hover span {
width: 300px;
position: absolute;
top: 30px;
left: 30px;
display: block;
background: #e6ecff;
border: 1px solid #003399;
text-decoration: none;
padding: 3px;
opacity: 1;
filter: alpha(opacity=100);
}


My pictures are displayed by something like:

<table>
<tr>
<td align="left" valign="top">
<a href="page-0001.html" class="tooltip"><span
class="info"><table>...</table></span>
<img src="thumbs/thumbnail-0001.jpg" alt="Feuerwand" border="0"
width="150" height="112"></a>

</td><td align="left" valign="top">
<a href="page-0127.html" class="tooltip"><span
class="info"><table>...</table></span><img
src="thumbs/thumbnail-0127.jpg" alt="Rotes Ende" border="0"
width="150" height="112"></a>
....


What can help?

 

[richard]

I have put my photos inside a table. Now I tried to add tooltip
displaying further information about the selected photo. No I hav the
problem that the shown tooltips are hidden by other photos of the
gallery. And therefore the tooltip is useless. Here is my style definition:

In your markup you show class="tooltip", yet in your CSS you show
".tipp".

Might want to make them the same for beginners.

Then, a tooltip is not simply a case of writing the CSS.
It generally involves some form of javascript.

www.dynamicdrive.com

 

[richard]

I have put my photos inside a table. Now I tried to add tooltip
displaying further information about the selected photo. No I hav the
problem that the shown tooltips are hidden by other photos of the
gallery. And therefore the tooltip is useless. Here is my style definition:

a, .tipp {
position: relative;
}

a span, .tipp span {
display: none;
font: 11px arial,helvetica,sans-serif;
color: #000066;
}

a:hover, .tipp:hover {
background-color: white;
}


a:hover span, .tipp:hover span {

Just noticed this too. Might want to look at how you have it worded.

 

[Jukka K. Korpela]

Scripsit richard:

Then, a tooltip is not simply a case of writing the CSS.
It generally involves some form of javascript.

Maybe you don't know how to create tooltips in CSS. This does not mean
that they cannot be created in CSS.

Then again, tooltips generally aren't useful. They are mostly used just
for showing off, as if they were something particularly advanced.

If some information is important enough, include it on your web page. If
it isn't, don't. If you can't make up your mind, put it on a separate
page and _link_ to it.

 

[Els]

I have put my photos inside a table. Now I tried to add tooltip
displaying further information about the selected photo. No I hav the
problem that the shown tooltips are hidden by other photos of the
gallery. And therefore the tooltip is useless. Here is my style definition:

[snip code]

What can help?

A workaround: instead of showing the tooltip with positioning using
top and left, try using right and bottom. The thing is, that the
tooltips are likely only covered by images that are appearing later in
the source, and after the image you are showing the tooltip on. By
making sure they don't go to the right or bottom of the image, you
simply avoid the next images to cover your tooltip.

 

[Ole Streicher]

Hi Yucca,

Then again, tooltips generally aren't useful. They are mostly used
just for showing off, as if they were something particularly advanced.
If some information is important enough, include it on your web
page. If it isn't, don't. If you can't make up your mind, put it on a
separate page and _link_ to it.

I think this is generally not true: one use is f.e. in (complicated)
formulas: If you have an equation that uses lots of variables, then I
find it useful to have a tooltip available on any of them that shows
its meaning.

Ofcourse, the same information should be included directly on the web
page. But when one tries to understand the formula, it may be quite
useful that he can get the information just by moving the mouse on it
instead of looking up in a long list below.

An example:

| C_P1 if XX_a1_l * A_Xt_123_0 < 10
A_Xt_L123 = | C_P2 - 12 if Q_AA_12 = 'None'
| -1 otherwise

where

A_Xt_L123 is ...
C_P1 is ...
....

(Here, simplifying the formula is not an option, and better names are
also not an option: both are generated automatically)

In that case, Tooltips are a very helpful addition (not replacement)
of the on-page description to better understand the formula.

BTW, how do I make tooltips with css only?

Ciao

Ole

 

[Nico Schuyt]

BTW, how do I make tooltips with css only?

http://www2.psacake.com:81/web/jl.asp

But maybe a formatted title attribute will do:

markup:
What is <span class="answer" title="It is a planet">Pluto</span>?

styles:
span.anwer {
cursor:help;
border-bottom:1px dotted blue; }

 

[Jukka K. Korpela]

Scripsit Nico Schuyt:

http://www2.psacake.com:81/web/jl.asp

Something like that, yes. You play a little with positioning and with
some method of making some text initially not shown and later shown on
mouseover. There are some oddities on that sample page, like using
consecutive z-index values instead of something more sensible like 100
and 200.

You have some flaws in the implementation, too. With CSS turned off,
part of the sample document looks like this:

"Now, let's have a look at the basic csscascade style sheets, the
separation from content and presentation code for the tooltip:"

Much more robustly, you would need to make it look like the following
without CSS:

"Now, let's have a look at the basic css (cascading style sheets, the
separation from content and presentation code) for the tooltip:"

This requires some additional markup and CSS code, in order to omit the
parentheses when CSS is in use (much in the spirit of Ruby markup and
<rp>). It's doable, but is this worth doing? I would say that you should
either do such things properly or not do them at all, so the pros and
cons should be evaluated from that perspective.

But maybe a formatted title attribute will do:

markup:
What is <span class="answer" title="It is a planet">Pluto</span>?

This is a good example of the risks of hiding data in attributes,
independently of whether you make the data visible in some situations.
The information has now become incorrect, due to changes in astronomical
classification. But if you, as an author or other checker, check a web
page for factual correctness, will you really peek at all the text in
HTML source that _might_ become visible under some circumstances?

styles:
span.anwer {
cursor:help;
border-bottom:1px dotted blue; }

Oh well, the CSS code won't hurt in that case (since the class name has
been misspelled). But if you fix that, then the styling may give the
impression of a link, i.e. mislead the user.

By the way, IE 6 implements 1px dotted border as 1px dashed. (On IE 7,
this has mostly been fixed.)

 

[Travis Newbury]

http://www2.psacake.com:81/web/jl.asp
But maybe a formatted title attribute will do:

Does your (this) method for tool tips display the "tip" over a html
<select> (in IE)? I seem to recall there being some bug in IE where
the <select> does not obey the z-index, and tool tips appear under the
<select>. (I guess I could just whip up a page and test it, but maybe
you or someone else knows)

 

[Jukka K. Korpela]

Scripsit Ole Streicher:

If you have an equation that uses lots of variables, then I
find it useful to have a tooltip available on any of them that shows
its meaning.

Perhaps, but people have read formulas for centuries without such
tooltips. The key issue is that all notations are duly explained,
preferably so that the explanations can easily be consulted when looking
at the formula. Having done that, you might consider whether there is
spare time for adding tooltips.

Ofcourse, the same information should be included directly on the web
page.

Or another page. A link might be preferable. You could even have a link
to it next to _each_ formula. The user can the open the linked page in a
new window, if desired.

But when one tries to understand the formula, it may be quite
useful that he can get the information just by moving the mouse on it
instead of looking up in a long list below.

Maybe in exceptional cases.

A_Xt_L123 is ...
C_P1 is ...
...

(Here, simplifying the formula is not an option, and better names are
also not an option: both are generated automatically)

Simplification and better names are always options. You probably mean
that they have been judged to cost too much-

In that case, Tooltips are a very helpful addition (not replacement)
of the on-page description to better understand the formula.

BTW, how do I make tooltips with css only?

As explained elsewhere in this thread, you play with positioning,
:hover, and z-index.

But that implies that the tooltip text appears right after the text it
relates to. This makes the page look or sound odd when rendered without
the CSS rules (or consumed by indexing robots). Just because the CSS way
is fairly easy does not mean that it is the right one in general.

_If_ you consider an approach like that, it's probably better to use
just JavaScript, not CSS (except in the trivial sense that you can
format the tooltips in CSS like any other text). For maximal browser
coverage, you would have a <textarea> on the page and your JavaScript
code would simply change the <textarea> content.

 

[Nico Schuyt]

Does your (this) method for tool tips display the "tip" over a html
<select> (in IE)?

Correct I had some problems with that building
www.debestebandenprijs.nl (the I-buttons)
(I only tested it in IE6)

 

[Ole Streicher]

Hi Yucca,

Perhaps, but people have read formulas for centuries without such
tooltips.

The have read human-generated (and manually optimized) formulas for
centuries. The topic "how to visualize a complicated configuration of
a dataprocessing unit" is quite new.

Simplification and better names are always options. You probably mean
that they have been judged to cost too much-

Not really: The formulas and the naming of the parameters are given;
they are used for an internal calculation and thus they are bound to
the limits that are given by the formula parser (and other
restrictions).

What I have is just a tool that reformats these formulas for easy
reading. At this place, simplifying and renaming can only be done
automatically, and I have no tool that is able to rename variables and
to simplify formulas automatically. Do you?

Other point (with renaming) is that people often are familar with some
of the used symbols (which are part of their own topic), but unfamilar
with others. That just makes an (automatic) rename difficult.

You may look at

http://olebole.lima-city.de/myf.html

to see an example of the automatically generated html page (in german;
links are not working).

Regards

Ole

 

[Ole Streicher]

Hi Yucca,

Perhaps, but people have read formulas for centuries without such
tooltips.

The have read human-generated (and manually optimized) formulas for
centuries. The topic "how to visualize a complicated configuration of
a dataprocessing unit" is quite new.

Simplification and better names are always options. You probably mean
that they have been judged to cost too much-

Not really: The formulas and the naming of the parameters are given;
they are used for an internal calculation and thus they are bound to
the limits that are given by the formula parser (and other
restrictions).

What I have is just a tool that reformats these formulas for easy
reading. At this place, simplifying and renaming can only be done
automatically, and I have no tool that is able to rename variables and
to simplify formulas automatically. Do you?

Other point (with renaming) is that people often are familar with some
of the used symbols (which are part of their own topic), but unfamilar
with others. That just makes an (automatic) rename difficult.

You may look at

http://olebole.lima-city.de/myf.html

to see an example of the automatically generated html page (in german;
links are not working). This page is generated from a
docbook/mathml-like source http://olebole.lima-city.de/myf.xml via an
xslt script.

Regards

Ole

 

[Jukka K. Korpela]

Scripsit Ole Streicher:

Not really: The formulas and the naming of the parameters are given;
they are used for an internal calculation and thus they are bound to
the limits that are given by the formula parser (and other
restrictions).

Bound by which god?

What I have is just a tool that reformats these formulas for easy
reading. At this place, simplifying and renaming can only be done
automatically,

Doing things manually, or doing them with better software, is always an
option, though not always affordable.

and I have no tool that is able to rename variables and
to simplify formulas automatically. Do you?

Oh, I stopped working on automatic processing of formulas in the late
1970s I think, so I can't give you any up-to-date information. But
renaming and simplifications are possible.

Other point (with renaming) is that people often are familar with some
of the used symbols (which are part of their own topic), but unfamilar
with others. That just makes an (automatic) rename difficult.

Well, if they are familiar with some variable that looks odd to a
layman, then that variable _is_ simple to them (and normally doesn't
need a tooltip).

You may look at

http://olebole.lima-city.de/myf.html

to see an example of the automatically generated html page

I don't quite see the point, in the current context. A variable name
like
A_Tt_L200_0.1min.WertQ
looks odd. It is a mixture of mathematical and programming notation
(math uses subscripts, not "_") and a mixture of conciseness and
verbosity: too long to be convenient and simple-looking, too short to be
self-explanatory. If you have really been forced, by some army of
soldiers or lawyers or bosses, to use such notations, I think the best
way to go is to start with simple explanations of the principles of this
strange system. Then you would tell the details and just _use_ the odd
names. Tooltips wouldn't really help here, I think.

 

[Ole Streicher]

Hi Yucca,

Bound by which god?

First of all, by the customer (and its interfaces). Then, by the need
of the data processing unit. Documentation is just a secondary problem
here; thus everything is optimized for processing.

Doing things manually, or doing them with better software, is always
an option, though not always affordable.

Doing thing manually: no. There is no way to get a "adjust
documentation on avery change" into the work flow of the
customer. They need (on a long run) a system that updates the
documentation automatically, or thesy have to struggle with inaccurate
documentation.

Better software: If I had some algorithm for formula vizualization,
yes. But I dont.

Well, if they are familiar with some variable that looks odd to a
layman, then that variable _is_ simple to them (and normally doesn't
need a tooltip).

Not really. As you can see in the example, the names are quite
funny. There are people that know some of them (those which are on
their own topic), but they dont know the others. They are just curious
"how is my result being calculated?". Others know the other variables.

I think the best way to go is to start with simple explanations of
the principles of this strange system.

This is not too complicated: A is for "Automatic", "Tt" for
"Temperature", "L200" for "Luft (Air) 200 cm above ground", "0" the
sensor index, "1min" the averaging time window, "WertQ" means quality
of its value (Wert). But everyone is familar just with his own "Tt"
and "L200"s and does not know the others. Also, there are exceptions
for historic reasons. So, at the end, every variable has a short
description which is shown below the formulas. However, when one
starts to study the formulas, (s)he is now forced to switch between
the formula itself and the variable descriptions below. Therefore, IMO
it would help to include tooltips here so that people see the
description in the place where they are. Clicking into another
parameter leads to its detailed description (and processing
instructions) anyway.