✔ Problem: Tooltip wird von input-Feldern überdeckt (IE)

M

mnbvcxy

Mitglied
Problem ist folgendes:
Ich zeige per Javascript+CSS eine Tooltipbox an, wenn ich über einen Link gehe.

Code: 
<html>
<head>
<script>
var wmtt = null;

function showWMTT(id) {
	wmtt = document.getElementById(id);
	wmtt.style.display = "block";}

function updateWMTT(e) {
	x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
	y = (document.all) ? window.event.y + document.body.scrollTop  : e.pageY;
	if (wmtt != null){
		wmtt.style.left = (x + 20) + "px";
		wmtt.style.top 	= (y + 20) + "px";}}

function hideWMTT() {
	wmtt.style.display = "none";}

document.onmousemove = updateWMTT;
</script>

<style>
#tooltipp_1{
position:absolute;
top:0px;left:0px;
display:none;
width:300px;height:100px;
background-color:blue;}
</style></head>

<body>
<a href="#" onMouseOver="showWMTT('tooltipp')" onMouseOut="hideWMTT()">Link</a>
<select size=1 name="Year">
   <option value="2005">2005</option>
   <option value="2006">2006</option>
   <option value="2007">2007</option>
   <option value="2008">2008</option>
   <option value="2009">2009</option>
  </select>

<div id="tooltipp"><b>Angezeigter Tooltiptext</b></div>

</body>
</html>

Das klappt soweit auch sehr gut, nur leider überlagern vorhandene select-Felder (also simple DropDownListen diesen Tooltip! Also der Tooltip wird angezeigt, das Select-Feld aber wird nicht überdeckt!
Das sieht leider ziemlich schlecht aus...

Ich habe mal versucht per z-index was zu machen, aber das geht leider nicht :(

Im FireFox geht es, nur der IE schafft es nicht! Dummerweise ist der Bereich explizit nur mit dem IE nutzbar (da dort einige dhtml-dinge zur anwendung kommen).

Hat da jemand einen Tipp?
 
Die einzige Möglichkeit ist das Verstecken der <select>'s(durch Ändern von visibility oder display)

Ursache des Ganzen:
Ein <select> ist ein sogenanntes "windowed Control"...quasi ein eigenes "Fenster"(ebenso <object>, vor IE5.5 war iFrame auch "windowed").

Diese "windowed Controls" werden immer auf erster Ebene angezeigt...egal, wie sehr du per CSS mit z-index herumprobierst.

http://support.microsoft.com/defaul...port/kb/articles/q177/3/78.asp&NoWebContent=1
 
VERDAMMT!
Das kann doch echt nicht wahr sein...position:fixed kann er auch nicht, mensch maier...

Ich hab gestern eine Dhtml-Variante eines Tooltipps gesehen. Das hat select-Felder überlagert. Nur dummerweise hab ich vom code nichts verstanden.
Schade...
 
Es gibt im IE moch das popup-Objekt.
Da dieses ein "Fenster" ist, könntest du es dafür verwenden. Vielleicht war es ja das, was du gesehen hattest.
 
Kann sehr gut sein, das es dieselbe Grundlage war, wie gesagt, hab im Code praktisch nichts gefunden was ich verstanden habe!

Erstmal Danke für den Link, sehr interessant dieses Ding!
Funktioniert erstmal ganz gut. Nur leider nur bei den OnClick-Events!

Sprich, wenn man das baut, das man draufklicken muss um es anzeigen zu lassen und nochmal klicken damit es weggeht, ist alles ok.

Ein drüberfahren (onmouseover) geht erstmal auch! nur wenn man die maus etwas auf dem Objekt bewegt, verschwindet das Fenster einfach wieder...manchmal selbst ohne hide() Funktion!!
Baut man noch onmouseout ein, kommt eine JS Fehlermeldung (und es geht trotzdem).

Da die Hilfe (die ich mit diesen Tooltips bauen will), absolut intuitiv sein soll, scheidet das Klicken aus!
(angenommen ich sitze vor den Input-Feldern, trag ordentlich was ein und weiß dann etwas nicht. Dann klick ich garantiert nicht irgendwo drauf, da ich Angst habe, das ne neue Seite kommt und alle Eingaben weg sind...daher ist das onmouseover halt einfach ein must-have).

Werde morgen damit noch etwas rumexperimentieren, mal sehen.

VIELEN DANK erstmal!!
 
nochmal ein kleines update:
die popup-funktion des IE ist wirklich gut! der fehler besteht lediglich in der def.

das beispiel wird mit

<SCRIPT LANGUAGE="JScript">
var oPopup = window.createPopup();
var oPopupBody = oPopup.document.body;

oPopupBody.innerHTML = "Display some <B>HTML</B> here.";
oPopup.show(100, 100, 200, 50, document.body);
</SCRIPT>
Zum Vergrößern anklicken....
angegeben!
Das ist soweit auch korrekt, allerdings darf man darauf nicht einfach ne funktion machen!
Eine Funktion muss so aussehen:


<SCRIPT LANGUAGE="JScript">
var oPopup = window.createPopup();

function tooltip() {
var oPopupBody = oPopup.document.body;

oPopupBody.innerHTML = "Display some <B>HTML</B> here.";
oPopup.show(100, 100, 200, 50, document.body);
}
</SCRIPT>
Zum Vergrößern anklicken....

Dann klappt das auch wunderbar!
Nimmt man alles in die Funktion hinein, verschwindet das fenster, sobald man die maus bewegt (wenn man z.B. ein <body onload=... benutzt)!
 
Code: 
style>
#tooltipp_1{
position:absolute;
top:0px;left:0px;
display:none;
width:300px;height:100px;
background-color:blue;}
</style></head>

<body>
<a href="#" onMouseOver="showWMTT('tooltipp')" onMouseOut="hideWMTT()">Link</a>
<select size=1 name="Year">
   <option value="2005">2005</option>
   <option value="2006">2006</option>
   <option value="2007">2007</option>
   <option value="2008">2008</option>
   <option value="2009">2009</option>
  </select>

<div id="tooltipp"><b>Angezeigter Tooltiptext</b></div>
da fehlt die css klasse für des div
sprich
Code: 
<style>
.tooltipp_1{
position:absolute;
top:0px;left:0px;
display:none;
width:300px;height:100px;
background-color:blue;}
</style></head>

<body>
<a href="#" onMouseOver="showWMTT('tooltipp')" onMouseOut="hideWMTT()">Link</a>
<select size=1 name="Year">
   <option value="2005">2005</option>
   <option value="2006">2006</option>
   <option value="2007">2007</option>
   <option value="2008">2008</option>
   <option value="2009">2009</option>
  </select>

<div id="tooltipp" class="tooltipp_1"><b>Angezeigter Tooltiptext</b></div>
sollte gehen.
Übrigens steht es auch so auf der Seite von der du dieses Script hast ;)
 
Ah, wir vergleichen grad Äpfel & Birnen.

Mein voriger post bezieht sich ausschließlich auf die (IE-only-dhtml-funktion) popup()

Mein erster post, mit dem skript, klappt ja auch. nur im gegensatz dazu verdeckt die dhtml-variante sämtliche Elemente einer Seite! Das erste Skript kann z.b. keine select-Felder überdecken!!


Hoffe alle Klarheiten beseitigt... :-(



[edit]
...oder besser gesagt, das Skript im ersten Post an sich lief, nur halt der Fehler mit den "durchscheinenden Elementen".
Hab wohl den Code nicht besonders sauber kopiert :-(
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück