Tooltipp-Kompatibilät auch im IE möglich

von **enigmartin** am 02.04.2008, 10:41

Hi Leute,
Ich wieder mit na Frage:

Ich habe mich jetzt seit einiger Zeit mit den Tooltip-Script von Walter Zorn beschäftigt (auf welches hier ja auch schon aufmerksam gemacht wird) und komme auch klar damit.
Problem ist, wie so oft, der Internet Explorer.
Zwar schreibt der Herr Zorn auf seiner Seite das die ToolTips im IE ab Version 5 funktionieren sollten aber bei mir tun sie es leider nicht. :cry:

Javascript ist freilich aktiviert.

Bei mir dient das Script nicht wiklich als klassischen ToolTip.

Es soll auf einer Karte, in der verschiedene Projektorte eingezeichnet und verlinkt sind, bei einem Mousover ein Fenster (der Tooltip) öffnen, welches die umliegenden Orte mit Links anzeigt.
Ich habe die Version mit dem HTML-Inhalt gewählt, also der Inhalt ist in einem <span> (nicht direkt im Link) den ich für den IE immerhin schon ausgeblendet bekommen habe.

Hier mal das Beispiel:

Code: Alles auswählen: <html> <head> </head> <body> <script type="text/javascript" src="wz_tooltip.js"></script> <div style="text-align: center; margin: 0 auto; width: 100px;"> <a href="index.html" onmouseover="TagToTip('Seite1', WIDTH, 260, FIX, [50, 50], LEFT, true, BGCOLOR, '#eeeeee', BORDERCOLOR, '#75a96b', BORDERWIDTH, 2, CLOSEBTN, true, CLOSEBTNCOLORS, ['#dddddd', '#888888', 'white', '#0000000'], STICKY, true, FADEIN, 300, PADDING, 5, TITLE,'<a style="color:#ffffff;" href="projektort">Projektort</a>' )">Seite 1</a> </div> <span style="display: none;" id="Seite1"> <a target="_blank" href="http://www.test.de">www.test.de</a><br /> Text für Seite 1, Text für Seite 1<br /> Text für Seite 1, Text für Seite 1<br /> Text für Seite 1, Text für Seite 1<br /> Text für Seite 1, Text für Seite 1<br /> Text für Seite 1, Text für Seite 1<br /> Text für Seite 1, Text für Seite 1<br /> Text für Seite 1, Text für Seite 1<br /> Text für Seite 1, Text für Seite 1<br /> Text für Seite 1, Text für Seite 1<br /> Text für Seite 1, Text für Seite 1<br /> Text für Seite 1, Text für Seite 1<br /> </span> </body> </html>

Es wäre echt super wenn man das auch für den Internet Explorer zum laufen bekommen könnte.
Vielleicht hatte sich damit schonmal jemand beschäftigt und könnte mir freundlicherweise helfen.

Wenn es da was in CSS gibt wäre das natürlich Ideal, ich hab da schon was ausprobiert aber es klappt nicht das das Fenster auch bleibt wenn ich mit der Maus von dem Link runtergehe, sodas man mit der Maus in das Fenster gehen kann.

Ein einfaches Tooltip via title="" kommt nicht in Frage.

Gruss

PS: Warum bekomme ich hier eigentlich nie automatisch ne Benachrichtigungs-E-Post wenn auf einen Beitrag von mir geantwortet wurde?

von **schnuppel** am 02.04.2008, 12:07

Hallo,

also bei mir funktioniert das skript

Gruß

Schnuppel

von **Ingo** am 02.04.2008, 12:43

Hi.

Eine reine CSS-Version sehe ich nicht, weil man dafür nur die Pseudoklasse :hover einspannen kann;
das bedeutet u.a., dass "onmouseout" der Tooltip wieder verschwindet.

Bei welcher IE-Version tritt denn der Fehler auf? Ich habe dein Beispiel exakt wie gepostet auf einem IE6
nachvollzogen - das funktioniert soweit, bis auf einen kleinen (wohl IE-gebundenen) Fehler, der aber den
Betrieb nicht weiter stört. - Hat tatsächlich noch irgendjemand den IE5 (Mac-Version)? (Laut webhits sind
das noch 3,nochwas Prozent ... no risk - no fun)

@schnuppel: auf welcher IE-Version hast du's getestet?

Gruß, Ingo

von **schnuppel** am 02.04.2008, 13:06

6 & 7

Leute die mit nem 5er IE durchs Netz browsen sind Sorgen gewöhnt

Gruß

Schnuppel

von **enigmartin** am 02.04.2008, 13:50

Erstmal vielen Dank an euch, das ihr euch die Zeit genommen habt und das getestet habt.

Ingo hat geschrieben:Hi.

Eine reine CSS-Version sehe ich nicht, weil man dafür nur die Pseudoklasse :hover einspannen kann;
das bedeutet u.a., dass "onmouseout" der Tooltip wieder verschwindet.

Wäre es denn nicht irgendwie möglich "onmouseout" auch so zu definieren wie in css ":hover" sodas das Fenster da bleibt.

Ingo hat geschrieben:Bei welcher IE-Version tritt denn der Fehler auf? Ich habe dein Beispiel exakt wie gepostet auf einem IE6
nachvollzogen - das funktioniert soweit, bis auf einen kleinen (wohl IE-gebundenen) Fehler, der aber den
Betrieb nicht weiter stört. - Hat tatsächlich noch irgendjemand den IE5 (Mac-Version)? (Laut webhits sind
das noch 3,nochwas Prozent ... no risk - no fun)

Ich selbst benutze hier exakt die Version 6.0.2900.2180 des Internet Explorers. Ich hab auch mal alles aktiviert was zu aktivieren geht, es funzt aber nicht, daher wunderts mich das es bei euch geht.
Ich hab es leider noch nicht zu Hause probiert aber das werde ich mit Sicherheit heute abend machen.

Redest du von einem Fehler der in der Statusleiste(?) des Browsers zu sehen ist, also son kleines gelbes Dreieck mit Ausrufezeichen, oder so?
Denn die hat man ja öfter im IE und die Seite funzt meist dennoch einwandfrei.

Wenn es nach mir ginge müsste man den IE vollkommen ausrotten, tschuldigt meine Ausdrucksweise aber ich hab viele viele wertvolle Stunden damit verbracht Seiten auf den IE abzustimmen. :devil:

Ich werde zu Hause das ganze mal auf meinem WebSpace laden.

Dann kann jeder das kurzerhand im IE testen.
Dann wäre ich sehr verbunden wenn mir jeder der es getestet hat mal schreibt welche Version des IE verwendet wurde und ob es funzt.

Danke

von **enigmartin** am 02.04.2008, 23:53

Also zu Hause habe ich ebenfalls die Version 6.0.2900.2180 und es funzt komischerweise auch.
Auf dem Lappi den ich dort habe sind die Benutzerrechte beschränkt (z.B. kann ich auf dem Lappi nichts installieren), vielleicht hängt es damit zusammen.

Hier hab ich das ganze mal hochgeladen, das andere mal testen können.

von **Ingo** am 03.04.2008, 00:08

Hi. Ich nochmal.

Ja, mit dem Fehler zielte ich auf das Warndreieck (Zeile 1115 oder so...). Ich benutze hier übrigens
ebenfalls IE Version 6.0.2900.2180, ist schon lustig. Vllt. kommt's ja dann auf den Update-Status an.

Was CSS angeht: das ist nunmal leider nicht für dynamische Dinge gemacht. Im Grunde sind schon
CSS-Popups etwas, woran der Erfinder wohl nicht zuerst gedacht hat. Dafür ist dann wirklich JS nötig,
oder Flash, oder Java, ... .

Ich war noch ein wenig kreativ: Wenn es wie im Beispiel so sein soll, dass der Tooltip immer an der
absoluten Position (50, 50) angezeigt werden soll, tut's ja vllt. auch der Vorschlag aus dem Anhang.
Unverschämterweise ein Nachbau :oops:

, nur bedeutend 'leichter' (14 Zeilen JS). Die Tooltip-Position
läßt sich aber auch mit wenig Aufwand einzeln pro Link setzen, fällt mir gerade ein (Edit: 2.Anhang).
Besondere Effekte sind da natürlich nicht eingebaut, aber es sollte auf allen DOM-fähigen Browsern laufen.
So als Fallback - falls das andere zu komplex wird ;o)

G'nacht, Ingo

von **enigmartin** am 06.05.2008, 09:32

Ingo hat geschrieben:Ich war noch ein wenig kreativ: Wenn es wie im Beispiel so sein soll, dass der Tooltip immer an der
absoluten Position (50, 50) angezeigt werden soll, tut's ja vllt. auch der Vorschlag aus dem Anhang.
Unverschämterweise ein Nachbau , nur bedeutend 'leichter' (14 Zeilen JS). Die Tooltip-Position
läßt sich aber auch mit wenig Aufwand einzeln pro Link setzen, fällt mir gerade ein (Edit: 2.Anhang).
Besondere Effekte sind da natürlich nicht eingebaut, aber es sollte auf allen DOM-fähigen Browsern laufen.
So als Fallback - falls das andere zu komplex wird ;o)

G'nacht, Ingo

Horido Jungs,

Hey hey, nicht schlecht. Einfach mal so eben aus dem Ärmel gejuckelt. Die Arbeit wäre aber nicht nötig gewesen, ich habs nun für alle Projektorte mit dem wz-tooltipp gemacht, aber danke dir dennoch.
Das hat mich überzeugt mich irgendwann, wenn ich mal so langsam Zeit habe, mit JavaScript auseinander zusetzen.

Nun hab ich an dieser Stelle noch ein kleines Problem.
Ich erklär nochmal.
Ich habe eine Karte in der einige Projektorte mit kulturellen Projekten enthalten sind. Wenn man über einen Ort fährt öffnet sich das jeweilige ToolTipp-Fenster in dem die Links der angrenzenden Projektorte sind.
Nun soll beim überfahren der Links im ToolTipp ein Pfeil (also eine Grafik) auftauchen, der zwischen dem gewählten Ort und dem angrenzenden Ort, auf dessen Link wir im ToolTipp sind , zeigt, sodas man sehen kann, wo der Ort liegt.
Ich muss dazu sagen das die Ortsnamen nicht da stehen, es wird nur mit Postleitzahlen gearbeitet, das heißt im Menü sind die jeweiligen Postleitzahlen geordnet und verlinkt und das gleiche auf der Karte.

Um den Pfeil anzuzeigen hab ich schon versucht eine CSS-Class als onmouseover im Link einzubauen, dann wird die Grafik aber logischerweise als Hintergrund im Link gesetzt, nicht so wie es soll.

Wie kann man das ganze umsetzen, vielleicht weiß einer wie sowas geht. Das Problem dabei ist glaube ich das der Inhalt des ToolTipps aus einem eigenen <span></span> heraus ins ToolTipp generiert wird.
Wäre euch wiedermal sehr dankbar.

Auf Wiederlesen

von **schnuppel** am 06.05.2008, 09:36

Hallo,

ich kenne das Skipt nicht mit dem Du es versuchst.

Schau doch mal bei mootools rein, die haben ein funktionierendes und frei anpassbares Tooltipframework.

Gruß

Schnuppel

von **enigmartin** am 06.05.2008, 14:07

Wenn du meinen letzten Beitrag gelesen hast, dann sollte klar werden das sich das mit dem ToolTipp erledigt hat. Mootools kenne ich, dessen ToolTipp ist aber nicht passend weil man es nur an der Maus direkt anheften kann, nicht aber frei auf der Seite Positionieren kann.
Es geht nun um den Link-MouseOver im ToolTipp, das hat nichts mit dem jeweiligen Entwickler des ToolTipps zu tun.

von **Ingo** am 12.05.2008, 23:50

Hi.

Also der Pfeil soll auf der Karte erscheinen? Hm. Eine Idee hätte ich da schon, allerdings mit JS.
Aber JS läuft ja ohnehin (für die Tooltips nach WZ). Man könnte beim Drüberfahren eines Links
mit der Maus wohl einen Pfeil (oder je nach Himmelsrichtung einen von z.B. 8 Pfeilen) auf der
Karte platzieren. Das müsste man dann aber mal im Detail sehen, der Pfeil müsste ja relativ genau
positioniert werden, vllt. relativ zur oberen linken Ecke des Links auf der Karte? Wie auch immer.

Gruß, Ingo

von **enigmartin** am 21.05.2008, 12:40

Es wird für jede Verbindung extra ein Pfeil gemacht, das heißt der past genau drauf, muss ich halt nur richtig positionieren, darin hab ich aber Übung, da ich für die Projektorte selber, welche auch ein Hover haben, allerdings war das einfacher da diese direkt über dem Link des jeweiligen Ortes lagen und nur darbüber hinaus vergrößert wurde, wenn man drüber fährt, dadurch wurden dann auch die umliegenden Städte hervorgehoben.

Nur muss ich erstmal aus dem ToolTipp raus um den Pfeil auf der Karte und nich im ToolTip anzeigen zu können.

Wenn du meinst das das machbar wäre, dann würde ich mich über einen Tip über die Funktionen die ich benötige freuen, da ich mich ja noch nicht so mit JS auskenne.

Gruss und danke für die Antwort

von **Ingo** am 23.05.2008, 21:24

Hi.

So, mit ein wenig Verspätung meine Idee, ohne den Aufbau der bisherigen Dateien zu
kennen:
Im Dokument gibt es genau einen Pfeil, der zunächst mit display:none ausgeblendet ist,
Wenn man über den Link fährt, setzt man die Position des Pfeils und macht ihn mit
display:block sichtbar. Wenn die Maus den Link verläßt, setzt man display:none - der
Pfeil verschwindet. - Siehe Dateianhang, statt Pfeilen hier rote Punkte.
Man könnte auch für jeden Link eine eigene Pfeilgraphik direkt ins HTML schreiben (alle
unsichtbar) und den Dateinamen fest einstellen, anstatt ihn mit JS zu setzen. Wenn es
aber sehr viele Pfeile gibt, werden wahrscheinlich auch diese vielen Pfeile beim Laden
des Dokumentes mitgeladen -> Ladezeit. Allerdings stehen nach dem Laden dann alle
Pfeile verzögerungsfrei zur Verfügung.

Gruß, Ingo

von **enigmartin** am 03.06.2008, 11:22

Danke für die Idee, ich hab das mal mit na Grafik probiert, dann hab ich das direkt in die Datei eingebaut und musste leider bemerken das meine Karte aufgrund des display: none auch weg ist, logisch. Die sollte aber da sein und auch die Mousovegrafiken der angrenzenden Projektorte.
Also im Prinzip müsste die Pfeilgrafik eine eigene Klasse bekommen (bspw.: img.pfeil), damit alle anderen Grafiken nicht mit einbezogen werden.
Ich hab schon versucht der Karte eine class zuzuweisen und dann auf display: block zu setzen aber das klappte auch irgendwie nicht und wenn dann müsste ich das rückwirkend auf alle Grafiken anwenden die ich schon eingebunden habe, leichter wäre es eine class an die Pfeile zu setzen die ich ja noch einbinde.

Aber wie gesagt, danke für deine Idee, scheint passend zu sein, wenn es dann machbar ist.

Achso, und verzeih das ich immer erst so spät zurück schreibe, aber ich bekomme keine Benachrichtigung, wenn jemand hier auf meine Beiträge antwortet. Ich bekomme das nicht eingestellt, daher schau ich nur wenn ich dran denke mal vorbei.

von **Ingo** am 03.06.2008, 11:30

Hi.

Gibt's das Projekt schon irgendwo online? Oder läßt sich der Code einsehen?
Für nähere Anpassungen wäre das denke ich nötig, weil man sonst einfach nur
im Klassennebel 'rumstochert etc. :lol:

Gruß, Ingo

Tooltipp-Kompatibilät auch im IE möglich

Tooltipp-Kompatibilät auch im IE möglich

Re: Tooltipp-Kompatibilät auch im IE möglich

Re: Tooltipp-Kompatibilät auch im IE möglich

Re: Tooltipp-Kompatibilät auch im IE möglich

Re: Tooltipp-Kompatibilät auch im IE möglich

Re: Tooltipp-Kompatibilät auch im IE möglich

Re: Tooltipp-Kompatibilät auch im IE möglich

Re: Tooltipp-Kompatibilät auch im IE möglich

Re: Tooltipp-Kompatibilät auch im IE möglich

Re: Tooltipp-Kompatibilät auch im IE möglich

Re: Tooltipp-Kompatibilät auch im IE möglich

Re: Tooltipp-Kompatibilät auch im IE möglich

Re: Tooltipp-Kompatibilät auch im IE möglich

Re: Tooltipp-Kompatibilät auch im IE möglich

Re: Tooltipp-Kompatibilät auch im IE möglich

Wer ist online?