WernerK: Tooltip wird nicht ausgeblendet??

Beitrag lesen

SELF-Forum

Tooltip wird nicht ausgeblendet??

WernerK
– Informationen zu den Bewertungsregeln

ok, ich dachte nachdem ich so oft nachgefragt habe hier in diesem Post, schaut hier eh niemand mehr rein.
Aber ok, versuchen wir es.

Hallo Forum,
nach über einem Tag suchen und ausprobieren habe ich jetzt zwar eine Lösung aber es wäre schön, wenn trotzdem meine alte Version laufen würde.
ich muss leider ein wenig ausholen um es zu beschreiben.

Folgende Ausgangssituation:

Ein Select Auswahlmenü auf einem Form.
Beim Click auf einen Wert wird ein Tooltip angezeigt. Beim Verlassen des Select Bereichs soll der Tooltip ausgeblendet werden.
Das Div Elelemt für den Tooltip wird per JS in der Funktion "showDefTooltip" erstellt.
Soweit so gut.
Jetzt passiert folgendes.
Beim ersten mal in das Select clicken wird der Tooltip angezeigt. beim Verlassen wird er ausgeblendet.
Beim zweiten mal in das Select klicken wird er angezeigt und geht aber nicht mehr weg, obwohl die Funktion "hideDefTooltip" greift.
(getestet durch alerts) und obwohl. Also wird irgendwie der "display.style='none' nicht ausgelöst?

<select name="lis_Body" id="warn_lis_Body"  onchange="showDefTooltip(this.form.lis_Body.selectedIndex,this.form.lis_Body);" onmouseout="hideDefTooltip();">
<option id="lis_Body_PTA" value="PTA" >Auto</option>
<option id="lis_Body_Lr" value="Lr" >Lr</option>
</select>

Die JS-Funktionen:
function showDefTooltip(obj,selobj){
alert('zeige tooltip');
document.forms[0].lis_Body_hidden.selectedIndex=obj;
wert = document.forms[0].lis_Body_hidden.value;
angaben=wert.split("#@#")
info = "<div class="head">Definition</div>";
format = "<div class="def"><br /><b>Format</b>:  "+angaben[2];
size =  "<br /><b>Size</b>:  "+angaben[3];
text = info + format + size ;
Xpos = getX(selobj,false);
XposTip = Xpos + 200 + "px";
Ypos = getY(selobj,false);
YposTip = Ypos + 5 + "px";
varobj = document.createElement ("div");
varobj.id = "tooltip";
varobj.style.left = XposTip;
varobj.style.top = YposTip;
document.body.appendChild (varobj);
this.varobj.innerHTML = text;
}//function

function hideDefTooltip(){
 if(document.getElementById('tooltip')){
  alert('jetzt hide');
  varobj = document.getElementById('tooltip');
  varobj.style.display= 'none';
 }
}

Nach über einem Tag forschen und versuchen habe ich jetzt folgendes hinbekommen.
Wenn ich ein Div fest auf dem Formular ablege, also:

<div id="tooltip" style="display:none"></div>

Und die Funktionen so ändere:
(bei "showDefTooltip" wird die Erstellung des Div rausgenommen)
function showDefTooltip(obj,selobj){
document.forms[0].lis_Body_hidden.selectedIndex=obj;
wert = document.forms[0].lis_Body_hidden.value;
angaben=wert.split("#@#")
info = "<div class="head">PaperDefinition</div>";
format = "<div class="def"><br /><b>Format</b>:  "+angaben[2];
size =  "<br /><b>Size</b>:  "+angaben[3];
text = info + format + size ;
document.getElementById("tooltip").style.display = 'block';
document.getElementById("tooltip").innerHTML = text;
}//function

function hideDefTooltip(){
 if(document.getElementById('tooltip')){
 varobj = document.getElementById('tooltip');
 varobj.style.display= 'none';
 }
}

dann funktioniert es wunderbar mit dem ausblenden und einblenden.

Ich hatte das aber extra so gemacht, weil ich diese Tooltips auf mehreren Seiten machen möchte und so müsste ich auf jeder Seite
dieses "div id=tooltip" einbinden. Wenn es direkt mit JS gemacht wird, wäre es einfacher.

Hat jemand eine Erklärung für das Problem

vielen Dank
Werner

Beitrag melden
–
Informationen zu den Bewertungsregeln