Tooltip - Chrome inkompatiblitäten

DarkRaver

Erfahrenes Mitglied
Hallo,
ich nutze dieses JS Tooltip:
Code:
<script type="text/javascript">
tooltip = null;
document.onmousemove = updateTooltip;
function updateTooltip(e) {
	if (tooltip != null && tooltip.style.display == 'block') {
		x = (e.pageX ? e.pageX : window.event.x) + tooltip.offsetParent.scrollLeft - tooltip.offsetParent.offsetLeft;
		y = (e.pageY ? e.pageY : window.event.y) + tooltip.offsetParent.scrollTop - tooltip.offsetParent.offsetTop;
		tooltip.style.left = (x + 20) + "px";
		tooltip.style.top   = (y + 20) + "px";
	}
}

function showTooltip(id) {
	tooltip = document.getElementById(id);
	tooltip.style.display = "block";
}
function hideTooltip() {
	tooltip.style.display = "none";
}
</script>
Leider funktioniert das nicht mit Google Chrome.
Was kann ich da drehen, dass das funktioniert?

Mfg
 
Wieso es jetzt in Chrome nicht geht, kann ich dir auf Anhieb nicht sagen. Aber du initialisiert z.B. "tooltip" mit "null", willst aber dann von "tooltip" Eigenschaften abfragen.

Wann wird denn "showTooltip" und "hideTooltip" aufgerufen?
 
Du solltest auf keinen Fall das mousemove-Event verwenden. Für Tooltips sind mouseenter und mouseleave wie geschaffen. Dann brauchst du auch die ganzen Browserweichen nicht mehr.
Das stimmt schon, ich hab es immer mit mouseover aufgerufen...

Aber du initialisiert z.B. "tooltip" mit "null", willst aber dann von "tooltip" Eigenschaften abfragen.
Wie sollte man das denn sonst machen? Ich habe von JS nicht so die große Ahnung :)
 
Zeig mal etwas HTML her. Ich weiß ja nicht wann "showTooltip" und "hideTooltip" aufgerufen wird. Dann kann ich gucken, was ich ändern würde.

Das mit dem null muss ich zurücknehmen, du prüfst das ja in dem If-Block.
 
Code:
			<div id="avatartooltip" class="tooltip">
				<img src="{@RELATIVE_WCF_DIR}images/avatars/avatar-default.png" alt="" />
			</div>
Code:
<a onmouseover="showTooltip('avatartooltip')" onmouseout="hideTooltip()" href="index.php?page=User">{$this->user->username}</a>
 
Ja, tatsache, es kommt etwas:
Code:
<a href="http://www.terraon.de" onmouseover="popup('<img src="http://www.reptilien-forum24.de/preview/terraon.jpg" />');" onmouseout="popout();">Terraon</a>
</script>
Schau am besten selbst mal:
http://www.reptilien-forum24.de/index.php
Ganz unten, am Ende steht Terraon. Wenn du da mittels Firebug oder Chrome-Konsole reinschaust, siehst du, das DIV für den Inhalt.

Mfg
 
Also bei mir kommt in der Fehlerkonsole nichts, außer ein paar Warnungen, dass die JS-Skripte per MIME-Type "text/x-js" übertragen werden.

Aber in Firefox werden mir kleine Fensterchen mit Bildern angezeigt, wenn ich über die Links unten fahre.
 
Zurück