nicht angemeldet
Endnoten als tooltip
0 0 
Matthias Apsel
Endnoten als tooltip
Hallo,
ich suche ein möglichst kompaktes Script, das die Endnoten (Fußnoten) per mouseover/mousemove als Tooltip (Infobox) anzeigt.
Die Endnoten befinden sich ganz unten am Ende der Webseite, und deren Inhalt ist nicht in den Text integriert. Die Anzeige mit dem tittle-Tag ist nicht möglich.
Alle Skripte, die ich bisher im Web gesehen habe, waren leider nicht besonders schlank (milde gesagt).
Vielen Dank im Voraus.
-
Hallo,
ich suche ein möglichst kompaktes Script, das die Endnoten (Fußnoten) per mouseover/mousemove als Tooltip (Infobox) anzeigt.
geht vermutlich irgendwie auch mit reinem CSS.
Die Endnoten befinden sich ganz unten am Ende der Webseite, und deren Inhalt ist nicht in den Text integriert. Die Anzeige mit dem tittle-Tag ist nicht möglich.
nehmen wir mal folgendes Markup an:
<!-- Normaler Text der Seite --> [...] irgendwelcher Text<sup id="verweis-endnote-1"><a href="#endnote-1">[1]</a></sup> [...] noch weiterer Text<sup id="verweis-endnote-2"><a href="#endnote-2">[2]</a></sup> [...] <!-- Endnotenbereich --> <p id="endnote-1">Endnote zu [1]</p> <p id="endnote-2">Endnote zu [2]</p> [...]Wenn Du das mit Javascript lösen willst, so brauchst Du bei mouseover über dem Verweis zur Endnote vom Wert der id des sup-Elementes den Textanteil "verweis-" streichen und das p-Element mit dieser id (oder ein Klon davon) an der von Dir gewünschten Stelle anzeigen.
Freundliche Grüße
Vinzenz
-
Hallo Ingrid,
Du hast nicht weit genug gedacht. Es kann ja mehrere Verweise auf die gleiche Endnote geben. Ersetze daher id durch class, die Klasse "endnote" sollte ausreichen.
nehmen wir mal folgendes Markup an:
<!-- Normaler Text der Seite --> [...] irgendwelcher Text<sup class="endnote"><a href="#endnote-1">[1]</a></sup> [...] noch weiterer Text<sup class="endnote"><a href="#endnote-2">[2]</a></sup> [...] nochmals Verweis auf Endnote 1<sup class="endnote"><a href="#endnote-1">[1]</a></sup> [...] <!-- Endnotenbereich --> <p id="endnote-1">Endnote zu [1]</p> <p id="endnote-2">Endnote zu [2]</p> [...]Wenn Du das mit Javascript lösen willst, so brauchst Du bei mouseover über dem Verweis zur Endnote vom Wert der id des sup-Elementes den Textanteil "verweis-" streichen und das p-Element mit dieser id (oder ein Klon davon) an der von Dir gewünschten Stelle anzeigen.
Es wird nur ein wenig komplizierter: Suche im Element, das gehovert wird, den Inhalt des Textknotens, der in den eckigen Klammern steht. Ermittle somit die id des p-Elementes, das Du als Infobox anzeigen willst.
Freundliche Grüße
Vinzenz
-
Lieber Vinzenz Mai,
Es wird nur ein wenig komplizierter: Suche im Element, das gehovert wird, den Inhalt des Textknotens, der in den eckigen Klammern steht.
warum nicht den DOM-Baum nach oben klettern, bis man ein Element der Klasse "endnote" trifft, um den href-Wert dessen Kindknoten (Dein Beispiel-Code hat nur das <a>-Element als Kindknoten) abzüglich seines Hash-Zeichens als ID zu verwenden? Das kann dann eine dokumentweite mousemove-Handlerfunktion übernehmen, die sich überhaupt nicht drum schert, wieviele Fußnoten es überhaupt gibt.
Ermittle somit die id des p-Elementes, das Du als Infobox anzeigen willst.
Und die Infobox wäre dann ein weiteres <span>-Element, welches mittels absoluter Positionierung und einer width von 90% des verfügbaren Viewports dynamisch als zweites Kindelement in das gegenwärtige <span class="endnote"> ein- und beim Verlassen wieder ausgehängt wird. Dieses <span>-Element könnte sogar immer wieder dasselbe sein, welches mittels innerHTML den Fußnotentext erhält.
Vielleicht komme ich heute abend zu einem Proof-Of-Concept-Entwurf...?
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Ingrid,
Vielleicht komme ich heute abend zu einem Proof-Of-Concept-Entwurf...?
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-
-
-
Om nah hoo pez nyeetz, yusuf!
Die Anzeige mit dem tittle-Tag ist nicht möglich.
nana, nicht so frauenfeindlich ;-)
Außerdem handelt es sich um ein Attribut.
Matthias
--
1/z ist kein Blatt Papier.
