tooltip mit js und css als Alternative zum title

[Robert]

Hallo ihr,

ich folgendes Problem. Und zwar bastel ich grad an einem Kalender, bei dem, onMouseOver über einem Tag, die Termine in einem Tootip erscheinen sollen.
Ich hätte es mir gern am einfachsten gemacht und das title attribut dafür genommen, dass blöde iss nur das der tooltip im IE nach einer bestimmten Anzahl von Zeichen umbricht und das sieht nicht schön aus.

Deshalb hab ich es nun mit js und einem div probiert. Im IE funktioniert das Script auch, aber im NN will der einfach nix in das <div> schreiben.

Kann mir da einer weiterhelfen???

Gruß
Robert

Code sieht momentan wie folgt aus:

<script language="JavaScript">
function show_date(content){
posx = document.all ? window.event.clientX : content.pageX;
posy = document.all ? window.event.clientY : content.pageY;

document.getElementById("content_box").style.left = posx;
  document.getElementById("content_box").style.top  = posy;

if(document.all){
  document.all.content_box.innerHTML = "<span>" + content +"</span><br>";
  } else {
   with (document.content_box.document){

open();
   write("<span>" + content  +"</span><br>");
   close();
   }
  }
  document.getElementById("content_box").style.visibility = "visible";
}

function hide_date(){
document.getElementById("content_box").style.visibility = "hidden";
}

[MudGuard]

Hi,

Deshalb hab ich es nun mit js und einem div probiert. Im IE funktioniert das Script auch, aber im NN will der einfach nix in das <div> schreiben.

Welcher? 4.x oder 6.x/7.x?

<script language="JavaScript">

type-Attribut fehlt.

function show_date(content){
posx = document.all ? window.event.clientX : content.pageX;
posy = document.all ? window.event.clientY : content.pageY;
  document.getElementById("content_box").style.left = posx;
  document.getElementById("content_box").style.top  = posy;

posx und posy sind Zahlen. Die CSS-Eigenschaften left und top erwarten aber eine Länge.

with (document.content_box.document){
   open();
   write("<span>" + content  +"</span><br>");
   close();

Hm. Das mit document.open/write/close kenn ich eigentlich nur für den Uralt-Netscape (document.layers...)
Beim Mozilla funktioniert auch innerHTML, aber da muß afaik das div erst über getElementById geholt werden.

Irgendwie scheint das so ne Mischung aus Netscape 4.x und Netscape 6.x/7.x Code zu sein...

cu,
Andreas

[Robert]

Hallo Andreas,

also gut, hab auf open(),write() und so geschissen - hast recht funktioniert. Er positioniert (im NN 6.2 und Mozilla) das DIV aber nicht an der Stelle an der sich die Maus befindet, sondern auf der y-Achse etwas verschoben.
Woran kann das liegen?

Daran:?

posx und posy sind Zahlen. Die CSS-Eigenschaften left und top erwarten aber eine Länge.

Was heisst das nun???

Danke
Robert

[at]

Hallo.

posx und posy sind Zahlen. Die CSS-Eigenschaften left und top erwarten aber eine Länge.
Was heisst das nun???

Zahl + _Maßeinheit_ = Länge
MfG, at

[Robert]

Hallo.

posx und posy sind Zahlen. Die CSS-Eigenschaften left und top erwarten aber eine Länge.
Was heisst das nun???

Zahl + _Maßeinheit_ = Länge
MfG, at

Ach so,na gut.

Ich bekomme jetzt aber immer noch eine Fehlermeldung im NN. Der kann irgendwie nicht die Position der Maus ermitteln. Ich dachte das würde so funktionieren.

Kann sich das vielleicht noch ma jemand angucken?

Robert.

[Struppi]

Code sieht momentan wie folgt aus:

Da wäre es noch uinteressant wie du den Aufrufst, da content ja im Mozilla das Eventobjekt ist und im IE?

<script language="JavaScript">

function show_date(content){
posx = document.all ? window.event.clientX : content.pageX;
posy = document.all ? window.event.clientY : content.pageY;

Warum prüfst du auf document.all, wenn du doch eigentlich was anderes wissen willst?

Übrigens bereitet hier der IE mehr Probleme, da je nach DOCTYPE andere Werte liefert.
Ich glaub das müßte in den meisten Browsern die Position zurückgeben:

function _mouse_pos(evt)
{
    if(!evt) return true;
    var _MOUSE_POS_ = {left:0,top:0};
    _MOUSE_POS_.left = evt.pageX ? evt.pageX : evt.clientX;
    _MOUSE_POS_.top = evt.pageY ? evt.pageY : evt.clientY;

// Der IE braucht Sonderbehandlung
    if(typeof document.documentElement != 'undefined')
    {
        // IE 6
        _MOUSE_POS_.left += document.documentElement.scrollLeft;
        _MOUSE_POS_.top += document.documentElement.scrollTop;
    }else    if (document.body)
    {
        // IE 4
        _MOUSE_POS_.left += document.body.scrollLeft;
        _MOUSE_POS_.top  += document.body.scrollTop;
    }
    return _MOUSE_POS_;
}

document.getElementById("content_box").style.left = posx;
  document.getElementById("content_box").style.top  = posy;

if(document.all){

document.all ist IE 4 syntax, neuere Browser (auch der IE) können ohne Probleme z.b. getElementById

function hide_date(){
document.getElementById("content_box").style.visibility = "hidden";
}

Besserer Stil ist es auf jeden Fall immer zu prüfen was du da machst. also hier auf das Objekt:

if(!document.getElementById) return;
var obj = document.getElementById("content_box");
if(!obj || obj.style) return;
obj.style.visibility = "hidden";

Damit machst du die Besitzer älterer Browser glücklich, die je nach Version noch mit aufpoppenden Fehlermeldungen genervt werden.

Struppi.