JS/CSS "Tooltip"

[Peete]

Fällt eigentlich auch unter CSS ;)

Ich versuche einen dynamisch angezeigten Infotext mit Javascript und CSS zu schreiben (so wie ein Tooltip). Bisher bin ich soweit:

function show(){
  document.getElementById('note').style.display = "block";
}
function hide(){
  document.getElementById('note').style.display = "none";
}

#note{
background-color : #560000;
color    : #CCCCCC;
width    : 150px;
position   : relative;
top     : -10px;
left: 10px;

}

<div onMouseOver="show()" onMouseOut="hide()">
  Text mit Note
  <div id="note" style="display:none;">Infotext</div>
</div>

Die Funktion ist auch einwandfrei, nur schwebt der Infokasten logischerweise nicht über allem, sondern "verdrängt" die anderen Elemente der Seite. Ich habe schon mit z-indizes herumgespielt, aber ohne Erfolg.
Wie lässt sich das denn realisieren? Über über Tipps würde ich mich freuen, viele Grüße - Peete

[MudGuard]

Hi,

Fällt eigentlich auch unter CSS ;)

Nö, nur unter CSS.

position   : relative;

Wenn Dir die Folgen der relativen Positionierung nicht gefallen, dann benutze nicht relative Positionierung.
Zumindest nicht für den "Tooltip".

cu,
Andreas

[Peete]

Heureka ! es funktioniert mit absolute, da hab ich nun gar nicht dran gedacht... *schäm*. Jetzt bin ich erstmal glücklich und zufrieden, Danke schön

Nö, nur unter CSS.

Zur Erklärung der Sache vielleicht auch ein bisschen unter js, aber ich stimme Dir zu, umgekehrt wäre es richtiger gewesen.