nicht angemeldet
Tooltip positionieren
Hallo
Ich habe da ein Problem und weis nicht an was es liegt.
Ich will zu einem Betrieb, Telefon und Fax beim Mouseover als Tooltip neben
an anzeigen lassen. Die Informationen(Telefon und Fax) werden aus der
Datenbank eingelesen. In FF wird alles normal positioniert in IE nicht. Die
Fehlerkonsole meldet mir keinen Fehler.
Hier ist der Link zum Auszug aus meiner Seite. Bitte nicht auf fehlende CSS
Formatierung achten.
Das Problem scheint im normalizeEvent(e) zu liegen. Denke ich mal. Und hier
ist noch mal der JavaScript Code:
function normalizeEvent(e)
{
if(window.event){e = window.event;}
if(e.pageX)
{e.offsetX = e.pageX; e.offsetY = e.pageY;}
else if(e.offsetX)
{e.pageX = e.offsetX; e.pageY = e.offsetY;}
if(e.target){e.srcElement = e.target;}
else if (e.srcElement){e.target = e.srcElement;}
return e;
}
function tooltipanzeigen(e, tel, fax)
{
a = document.getElementById('tooltip');
e = normalizeEvent(e);
a.style.display = 'block';
a.style.left = (parseInt(e.pageX)+20)+'px';
a.style.top = (parseInt(e.pageY)+20)+'px';
a.innerHTML = '<p>Tel:'+tel+' <br> Fax:'+fax+'</p>';
}
function tooltipverbergen()
{
document.getElementById('tooltip').style.display = 'none';
}
Ich hoffe ich habe jetzt nichts vergessen.
Toshi
-
-
Om nah hoo pez nyeetz, ToshiOzumi!
warum nicht mit CSS?
Themawechsel:
"Interessant ist die unterschiedliche Interpretation von margin-left: -1em;: Firefox in Version 3.6 geht vom linken Rand des Elternelements aus; IE, Safari, Opera und Chrome vom rechten."
Das liegt daran, dass es Firefox falsch macht ;) das umgebende Element relativ zu positionieren und den Tooltip absolut ist eine eine Alternative zu deinem unsinnigen :root-Hack, da davon auszugehen ist, dass andere moderne Browser ebenfalls etwas damit anfangen können.
-
Om nah hoo pez nyeetz, suit!
Das liegt daran, dass es Firefox falsch macht ;)
die 3.7 Preview macht es dann auch richtig.
das umgebende Element relativ zu positionieren und den Tooltip absolut ist
... das, was in dieser Seite vorgeschlagen und umgesetzt wird (Ich wüsste auch nicht, wie man es anders machen sollte). Natürlich könnte man auch z.B. am Absatz ausrichten. Das hätte den Vorteil, dass die Wahrscheinlichkeit, dass der Tooltipp aus dem Fenster verschwindet, geringer wird.
unsinnigen :root-Hack,
halte ich auch für nicht notwendig, wie ich an jener Stelle schrieb.
Matthias
--
-
Om nah hoo pez nyeetz, apsel!
Das liegt daran, dass es Firefox falsch macht ;) die 3.7 Preview macht es dann auch richtig.
ne, leider nicht.
Matthias
--
-
die 3.7 Preview macht es dann auch richtig.
ne, leider nicht.
Ein Grund mehr, Opera zu verwenden ;)
-
'ǝɯɐu$ ıɥ
die 3.7 Preview macht es dann auch richtig.
ne, leider nicht.
Ein Grund mehr, Opera zu verwenden ;)
so so (abschnitt: CSS3 selectors and Opera) :-)
ssnɹƃ
ʍopɐɥs--
25 Dinge an denen man erkennt das man alt ist:
4. Um 6:00 Uhr stehst Du auf und gehst nicht zu Bett.-
so so (abschnitt: CSS3 selectors and Opera) :-)
Augenauswischerei, irgendwelche Nightlys oder Preview-Browser sind nicht wirklich aussagekräftig.
Es ist schön, dass der IE9 CSS3-Selektoren verstehen wird, in der Praxis einsetzbar ist das aber nicht, der Browser ist noch nicht am Markt.
Firefox versteht ::selection in der Praxis nicht.
Das die 2 Bugs in ::nth-of-type() und ::target sind vertretbar wenn man sich vor Augen hält, dass Opera bei den CSS3-Eigenschaften schon wesentlich weiter ist als die anderen Browser am Markt.
-
'ǝɯɐu$ ıɥ
so so (abschnitt: CSS3 selectors and Opera) :-)
Augenauswischerei, irgendwelche Nightlys oder Preview-Browser sind nicht wirklich aussagekräftig.
wo du recht hast, hast du recht ;-)
Es ist schön, dass der IE9 CSS3-Selektoren verstehen wird, in der Praxis einsetzbar ist das aber nicht, der Browser ist noch nicht am Markt.
ich hab zeit, obwohl....
Firefox versteht ::selection in der Praxis nicht.
Das die 2 Bugs in ::nth-of-type() und ::target sind vertretbar wenn man sich vor Augen hält, dass Opera bei den CSS3-Eigenschaften schon wesentlich weiter ist als die anderen Browser am Markt.
s.o.
männo, bei dir macht ärgern so langsam keinen spaß mehr.ssnɹƃ
ʍopɐɥs--
25 Dinge an denen man erkennt das man alt ist:
4. Um 6:00 Uhr stehst Du auf und gehst nicht zu Bett.-
männo, bei dir macht ärgern so langsam keinen spaß mehr.
Irgendwann schaffst du es :p
-
'ǝɯɐu$ ıɥ
männo, bei dir macht ärgern so langsam keinen spaß mehr.
Irgendwann schaffst du es :p
25 Dinge an denen man erkennt das man alt ist:
11. Ältere Verwandte fangen an, dreckige Witze auch in Deiner Gegenwart zu erzählen.ssnɹƃ
ʍopɐɥs
-
-
-
-
-
Om nah hoo pez nyeetz, suit!
Ein Grund mehr, Opera zu verwenden ;)
Man bedenke, dass Opera der Grund war, überhaupt
marginins Spiel zu bringen.Zitat: Aufgrund eines Bugs zeigen die Opera-Browser < 10.5 die Tooltipps nicht an. Wenn man nicht die Position des Tooltipps, sondern seinen Abstand zum Elternelement festlegt, zeigt auch Opera die Tooltipps an.
Matthias
--
-
Zitat: Aufgrund eines Bugs zeigen die Opera-Browser < 10.5 die Tooltipps nicht an. Wenn man nicht die Position des Tooltipps, sondern seinen Abstand zum Elternelement festlegt, zeigt auch Opera die Tooltipps an.
Opera 10.10 ist ohnehin antik ;)
-
Om nah hoo pez nyeetz, suit!
Opera 10.10 ist ohnehin antik ;)
Folgerung: Es wird
bottomundleftstattmarginverwendet und alle aktuellen Browser machen es richtig.Matthias
--
-
-
-
-
-
-
-
Hallo Mattias,
warum nicht mit CSS?
Also ich habe zwei Probleme weshalb ich das nicht mit CSS löse. Einmal ist
das der Zeilenumbruch, also ich habe ihn bis jetzt noch nicht hin bekommen.
Wenn es jetzt nur Tel und Fax ist, ist es nicht schlimm aber wenn noch
Adresse und E-Mail dazukommen wird es unübersichtlich. Und Zweitens ist es
die kurze Dauer wie lange es angezeigt wird. Also ich würde z.B. nicht
schaffen in der zeit die Tel-Nummer einzugeben. :)Toshi
-
Om nah hoo pez nyeetz, ToshiOzumi!
Also ich habe zwei Probleme weshalb ich das nicht mit CSS löse. Einmal ist das der Zeilenumbruch, also ich habe ihn bis jetzt noch nicht hin bekommen.
Zeilenumbrüche lassen sich einbauen, indem du den Tooltipp nicht mit
:afterumsetzt, sondern z.B. ein div oder span-element verwendest, dass du dann im Sinne der Barierrefreiheit nicht sichtbar und unsichtbar machst, sondern mitleftaus dem sichtbaren Anzeigebereich verschiebst. Und Zweitens ist esdie kurze Dauer wie lange es angezeigt wird. Also ich würde z.B. nicht schaffen in der zeit die Tel-Nummer einzugeben. :)
der Selektor
:hoverwirkt solange, wie der Mauszeiger das Objekt berührt.Matthias
--
-
Hallo Mattias,
der Selektor
:hoverwirkt solange, wie der Mauszeiger das Objekt berührt.Ich habe das mit span umgesetzt. Aber im IE zeigt er es mir nur 10 Sek. lang
an.Toshi
-
Om nah hoo pez nyeetz, ToshiOzumi!
vielleicht suchst du ja soetwas wie die Tooltipps auf brückentage.info. Auch im IE bleibt der Tooltip solange sichtbar, wie der Mauszeiger auf dem Auslöser.
Matthias
--
-
Hallo Mattias,
vielleicht suchst du ja soetwas wie die Tooltipps auf brückentage.info. Auch im IE bleibt der Tooltip solange sichtbar, wie der Mauszeiger auf dem Auslöser.
Ja genau sowas suche ich. Gut ich habe jetzt nicht gesehen ob das da irgendwo
einen Umbruch gibt.Toshi
-
Om nah hoo pez nyeetz, ToshiOzumi!
Ja genau sowas suche ich. Gut ich habe jetzt nicht gesehen ob das da irgendwo einen Umbruch gibt.
gewünschte Umbrüche mit
<br>oderwhite-spacelassen sich bei dieser Lösung nicht umsetzen*. Deshalb:*obwohl:
white-space: prehab ich gar nicht probiert.Matthias
--
-
Om nah hoo pez nyeetz, apsel!
"Autoren können Neuezeilezeichen in den erzeugten Inhalt einfügen, indem sie die Escape-Folge „\A“ in einen der Strings hinter der 'content'-Eigenschaft einfügen. Damit wird ein erzwungener Zeilenumbruch eingefügt, ähnlich dem BR-Element in HTML." [CSS2.1 - 12.2]
Matthias
--
-
-
-
-
-
-
-