javascript-tooltip?

[seb]

hallo community!

ich hab da ein (vermutlich eher kleineres) problem mit einem javascript-tooltip. der verwendete code stammt nicht von mir, ich bin da fast gänzlich unwissend. das script ist für mich leider zu komplex, ich blick da nicht so recht durch - was wohl schuld daran ist dass ich den fehler nicht selbst seh.

folgendes:

ich hab das script bekommen und jetzt schon ne ganze weile verwendet, funktioniert bestens, wer will kann sich das ergebnis hier mal ansehen:
http://blog.plastick.org/klick.html

falls sinn und zweck nicht sofort einleuchten: das ist eine kleine linksammlung, beim überfahren eines links mit der maus (klingt brutaler als es ist...) sollte ein kleines fenster erscheinen mit einem kurzen kommentar zur verlinkten seite.

tja, und aktuell versuch ich mich dran die seite generell wein wenig umzukrempeln, möchte dieses script aber wieder verwenden. also hab ich mal alle relevanten inhalte, styles und natürlich das script selber ganz einfach mit copy&paste in die neue seite übertragen, mit diesem ergebnis:
http://plastick.org/klikk.php

-> warum ist mein "tooltip" plötzlich so weit vom mauszeiger entfernt?

das ist das hauptproblem, denn so kann ich das natürlich nicht lassen. ich häng gleich noch das script ran, eventuell sieht hier jemand auf anhieb wo es hakt?
und wo ich schonmal dabei bin - ich versteh wie gesagt nicht viel von javascript. ein paar gedanken mach ich mir ja aber doch dazu...

  
function logmessage (message) {  
  return;  
  var log_elem = logmessage.log_elem || document.getElementById("log");  
  logmessage.log_elem = log_elem;  
  var textnode = document.createTextNode(message);  
  var li_element = document.createElement("li");  
  li_element.appendChild(textnode);  
  log_elem.appendChild(li_element);  
}  

1. so beginnt das script, und dieser teil ist für die funktion des "tooltips" selbst doch eigentlich unerheblich - oder täusche ich mich da? sieht jedenfalls so aus als wäre das und die folgenden auskommentierten zeilen, die auf logmessage() zugreifen, überflüssig...

  
document.write("<style type='text/css'>" +  
".linkliste dd { margin:0; padding:0; position:absolute; left: -9000px; top:0; width: 0; overflow: hidden; }" +  
"</style>");  

2. ist die css-angabe im header mittels document.write irgendwie wichtig? also... ists das für das script erforderlich? irgendwie? ansonsten würd ich das eben einfach in die css schreiben.

  
window.onload = function () {  
 tooltip.init();  
};  
  
var tooltip = new Object();  
tooltip.current_dt = null;  
tooltip.current_dd = null;  
tooltip.init = function () {  
 var dl_elements = document.getElementsByTagName("dl");  
 for (var i = 0, dl_element, j = 0, dt_element; i < dl_elements.length; i++) {  
  dl_element = dl_elements[i];  
  if (dl_element.className != "linkliste") {  
   continue;  
  }  
  dl_element.onmousemove = tooltip.update;  
  dl_element.onmouseover = tooltip.show;  
  dl_element.onmouseout = tooltip.hide;  
 }  
};  
tooltip.show = function (e) {  
 if (tooltip.current_dd) {  
  tooltip.hide();  
 }  
 e = e || window.event;  
 var target = e.target || e.srcElement;  
 //logmessage("show  target:" + target.nodeName + " handling:" + this.nodeName);  
 var node = target;  
 while (node.nodeName != "DT" && node != null) {  
  node = node.parentNode;  
 }  
 tooltip.current_dt = node;  
 if (tooltip.current_dt.corresponding_dd) {  
  tooltip.current_dd = tooltip.current_dt.corresponding_dd;  
 } else {  
  while (node.nodeName != "DD" && node != null) {  
   node = node.nextSibling;  
  }  
  tooltip.current_dd = tooltip.current_dt.corresponding_dd = node;  
 }  
 tooltip.current_dd.className = "visible";  
};  
tooltip.update = function (e) {  
 if (!tooltip.current_dd)  
  return;  
 e = e || window.event;  
 //logmessage("update target:" + e.srcElement.nodeName + " handling:" + this.nodeName);  
 if (e.pageX) {  
  tooltip.x = e.pageX;  
  tooltip.y = e.pageY;  
 } else if (document.documentElement && document.documentElement.scrollTop) {  
  tooltip.x = e.clientX + document.documentElement.scrollLeft;  
  tooltip.y = e.clientY + document.documentElement.scrollTop;  
 } else if (document.body) {  
  tooltip.x = e.clientX + document.body.scrollLeft;  
  tooltip.y = e.clientY + document.body.scrollTop;  
 }  
 tooltip.current_dd.style.left = (tooltip.x + 15) + "px";  
 tooltip.current_dd.style.top = (tooltip.y + 20) + "px";  
};  
tooltip.hide = function () {  
 //logmessage("mouseout");  
 tooltip.current_dd.className = "hidden";  
 tooltip.current_dd.style.left = "-9000px";  
};  

3. vermutlich der hauptteil des scripts, für die funktion verantwortlich. ziemlich viel zeug für so ne simple funktion, aber dieses script wurde mir als stabil, solide und zukunftstauglich empfohlen, ich hab dem mal vertraut (und bin bisher gut damit gefahren).

eigentlich dachte ich dieser abschnitt recht weit unten:

  
tooltip.current_dd.style.left = (tooltip.x + 15) + "px";  
tooltip.current_dd.style.top = (tooltip.y + 20) + "px";  

... wäre für die position meines "tooltips" verantwortlich, aber wenn ich diese werte sehe und mir die position beim neuen beispiel ansehe... irgendwas läuft da schief.

ich vermute ja dass die erfassung von tooltip.x/tooltip.y irgendwie mißglückt, aber aus diesen if-else-bedingungen werd ich nicht schlau.

ja, genug der worte - kann/will mir da jemand unter die arme greifen? sieht jemand schon woran es liegt? wennnicht - wie krieg ich das hin?

grüße, schönen abend,

sebi

[Antipitch]

Moin sebi,

das:

eigentlich dachte ich dieser abschnitt recht weit unten:

tooltip.current_dd.style.left = (tooltip.x + 15) + "px";
tooltip.current_dd.style.top = (tooltip.y + 20) + "px";

> ... wäre für die position meines "tooltips" verantwortlich,  
  
ist schon richtig. Aber wenn ich mir deine neue Seite ansehe und die Lage des Tooltips, würde ich behaupten, dass die horizontale Lage der Tooltips sich aus linker Rand des weißen Containers plus Mouseposition + 15px ergibt. Der ist nämlich absolut positioniert und stellt somit einen "containing block" (<http://www.w3.org/TR/CSS21/visudet.html#containing-block-details>) dar. Zentriere den Container stattdessen mal mit margin-left und-right: auto.  
  
Wenn du keinen großen Wert auf den Mausverfolgungseffekt legst, geht das ganze aber auch ohne Javascript: <http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P50/> (auf die Website verlinkst du ja schon selbst ;-). Tabellen bräuchtest du (dann) auch nicht.  
  
  
cheers  
Antipitch 

[sebi]

Moin sebi,

das:

[...]

»»

ist schon richtig. Aber wenn ich mir deine neue Seite ansehe und die Lage des Tooltips, würde ich behaupten, dass die horizontale Lage der Tooltips sich aus linker Rand des weißen Containers plus Mouseposition + 15px ergibt. Der ist nämlich absolut positioniert und stellt somit einen "containing block" (http://www.w3.org/TR/CSS21/visudet.html#containing-block-details) dar. Zentriere den Container stattdessen mal mit margin-left und-right: auto.

hi Antipitch,

das wars! also, wenn ich 'position:absolute' weglasse funktionierts prima! jetzt hab ich nur ne andere sorge: funktioniert margin-auto denn auch "überall"..?

bei selfhtml heißt es dass der ie bis v5 das nicht kann - gut, das ist zu vernachlässigen, wer noch mit den dingern rumsurft hat keine forderungen zu stellen ;)

aber der rest der großen browsermeute? da konnt ich jetzt auf die schnelle nichts finden. eigentlich hab ich das nur deswegen absolut positioniert, weil ich dachte das würd sonst kaum passen. wär natürlich perfekt wenns das garnicht braucht :)

Wenn du keinen großen Wert auf den Mausverfolgungseffekt legst, geht das ganze aber auch ohne Javascript: http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P50/ (auf die Website verlinkst du ja schon selbst ;-). Tabellen bräuchtest du (dann) auch nicht.

heh, ja... also, bevor ich dieses script hatte wollte ich das so machen - mit css. frag mich bitte nichtmehr was der grund war, es gab jedenfalls einen warum ich das dann doch nicht so haben wollte - der "verfolgungs"-effekt wars jedenfalls nicht. trotzdem danke für den tip ;)

btw: die tabellen fliegen eh. die sollen mal so gut es geht aus der seite verschwinden, is unter anderem n grund warum ich das "neu" machen will. die sind bei der genannten seite nur drin weil ich halt einfach mal die gesamte alte tabelle reinkopiert hab.

hm, dann bedank ich mich mal artig für deine hilfe - und vielleicht erfahr ich ja noch ob margin left/right-auto wirklich voll und ganz ausreicht :)

grüße,

sebi

[Antipitch]

Hi sebi,

und vielleicht erfahr ich ja noch ob margin left/right-auto wirklich voll und ganz ausreicht :)

tust du: tut es (IE5 is dead ;-).

JS vs. CSS: Solange in den Tooltips nur Bonus-Infos stattfinden, ist das ja ok so. Sonst müsstest du dich vielleicht um eine fallback-Lösung kümmern.

cheers
Antipitch

[sebi]

Hi sebi,

und vielleicht erfahr ich ja noch ob margin left/right-auto wirklich voll und ganz ausreicht :)

tust du: tut es (IE5 is dead ;-).

hi again,

spitze! ist irgendwie an mir vorbeigerauscht. dass man so zentrieren kann war mir klar, aber ich hab bis jetzt eben immer die umständlichere methode gewählt, frei nach dem motto "funktioniert sonst ja doch wieder nicht überall". gerade was safari, opera & co betrifft - das ganze dann bitte noch plattformunabhängig, etc. - hätt ich da jetzt probleme erwartet.

so einfach kanns manchmal sein, danke! :)

JS vs. CSS: Solange in den Tooltips nur Bonus-Infos stattfinden, ist das ja ok so. Sonst müsstest du dich vielleicht um eine fallback-Lösung kümmern.

jup, korrekt - der bonus-tooltip-text ist nicht wirklich wichtig und auch wenn js versagt sind die links noch klickbar. reicht mir völlig :)

schönen tag noch,

bye!