Good cross-browser method for tooltips?

[Morten]

Hi. I'd like to be able to make tooltips for some "span" elements. So
I'd do like:
<dic class="toolblock">Stuff<span class="tooltip">Something about
"Stuff"</span></div> and then use the below stylesheet:

div.toolblock span.tooltip {
display:none;
}

div.toolblock:hover span.tooltip {
display: block;
position: absolute;
top: 200px; left: 0; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
background: #ffff80;
border: 1px solid;
}

I would like a more robust way that allows relative placement in
respect to the "span". What's the recommended approach?

Thanks.

Morten

[Markus Ernst]

Morten wrote:

Hi. I'd like to be able to make tooltips for some "span" elements. So
I'd do like:
<dic class="toolblock">Stuff<span class="tooltip">Something about
"Stuff"</span></div> and then use the below stylesheet: [...] I would like a more robust way that allows relative placement in
respect to the "span". What's the recommended approach?

Not exactly what you ask for, as you can't design it, but extremely
cross-browser and easy to use, also for inline use: The title attribute.

span.toolblock {
border-bottom:1px dashed red;
cursor:help;
}

Hello this is my <span class="toolblock" title="Vorschlag is German for
suggestion">Vorschlag</span>.

HTH
Markus

[Morten]

> > I would like a more robust way that allows relative placement in

respect to the "span". What's the recommended approach?

Not exactly what you ask for, as you can't design it, but extremely
cross-browser and easy to use, also for inline use: The title attribute.

span.toolblock {
border-bottom:1px dashed red;
cursor:help;
}

Hello this is my <span class="toolblock" title="Vorschlag is German for
suggestion">Vorschlag</span>.

Excellent! Thanks! :-)