Text-Popup als Infobox

Dieser Effekt ist im gegebenen Zusammenhang eher als Spielerei zu verstehen, aber ich wollte das von Bildern bekannte Erklärungs-Popup bei Mouse HOVER auch für normalen Text implementieren.

Bei Texten redet man von Infoboxen, die bei Mouse OVER als Overlay über den vorhandenen Text angezeigt werden.

Auf der Seite von Ingo Turski habe ich eine Anleitung gefunden, wie so etwas prinzipiell unter ausschließlichem Einsatz von CSS zu bewerkstelligen ist. Jetzt musste ich die gefundene Lösung nur noch meinem Netobjects Fusion (NOF) schmackhaft machen ;)

Letztlich kommt man bei NOF nicht umhin, an der für das Popup vorgesehenen Position im WYSIWYG Editor einen eigenen, leeren Layout-Bereich einzubauen und die letzte Zeile mit dem Text vor dem zu erklärenden Wort, sowie den passenden HTML Code über den HTML Editor einzugeben, weil NOF es nicht erlaubt, HTML Code in seine Standardblöcke einzufügen.

Für das bei der PV-Anzeige verwendete Beispiel, die Erklärung des WAF aus Wikipedia

muss im HTML Editor von NOF für den schmalen Layout-Bereich im Bild oben folgendes eingegeben werden:

<p>Erstens ist das meines Erachtens recht gut gel&ouml;st, zweitens hat diese Form der Pr&auml;sentation einen hohen
<a class="infobox" >WAF<span>
<b>Woman Acceptance Factor</b>, auch <b>Wife Acceptance Factor</b><br>
Wikipedia: Der Woman Acceptance Factor ist umgekehrt proportional zum m&ouml;glichen Konflikt, der aus den unterschiedlichen
 Ansichtsweisen der Ehepartner resultiert. Je niedriger der WAF, desto mehr &Uuml;berredungsarbeit muss aufgebracht werden, oder desto
 mehr Konflikt resultiert aus der Anschaffung oder dem Projekt.</span></a> :)</p>

Die Zeile mit dem Text vor und nach dem eigentlichen Infobox-Trigger “WAF”, muss ebenfalls im HTML Editor eingebaut werden, da sonst das Triggerwort immer in eine neue Zeile positioniert wird.

Man beachte, dass deutsche Umlaute mittels HTML-Code eingegeben werden müssen.

Zum Bild oben:
Hinter der letzten Zeile vor dem Triggerwort muss ein weicher Zeilenvorschub eingegeben werden. Weiterhin darf hinter dem eingefügten Layout-Bereich kein Zeilenvorschub eingefügt werden, um den Abstand zum nachfolgenden Text so klein wie möglich zu halten. Leider ergibt sich durch das Einfügen eines Layout-Bereichs ober- und unterhalb ein größerer Abstand, ein Absatz wird also aufgebrochen. Die Breite des Layout-Bereichs im WYSIWYG Editor ist unerheblich, wichtig ist, dass die Höhe so klein wie möglich eingestellt wird, das bestimmt im wesentlichen im Browser den Abstand zum nachfolgenden Absatz. Aber aufpassen, dass man den Bereich noch mit der Maus selektieren kann, sonst sind Änderungen nicht mehr möglich, man käme um ein Löschen und neu anlegen nicht herum.

Damit das Ganze dann zu einem Popup Fenster wird, muss natürlich noch das passende CSS in die Formatdatei eingefügt werden.

Die CSS-Erweiterung enthält folgende Zeilen:

/* Erklärung popup per Mouse over (hover) */
<style type="text/css">
  a.infobox span { text-align:left; width:35em; }
  a.infobox { border-bottom: 1px dashed blue; text-decoration:none; }
  a.infobox:hover { cursor:help; color:black; background:white; }
  a.infobox span { visibility:hidden; position:absolute; left:auto;
    margin-top:.5em; padding:1em; text-decoration:none; }
  a.infobox:hover span, a.infobox:focus span, a.infobox:active span {
    margin-top:.5; padding:.5;
    text-align:left; width:35em;
    visibility:visible; auto:.5em;
    border:1px solid ; color:black; background:Gainsboro;
    border-radius: 10px;
    padding-top: .5;
    padding-left: .8em;
    padding-right: .8em;
    padding-bottom: .8em;
    font-family: Calibri,sans-serif; text-decoration: none;
    background-color: rgbd-color: rgb(255,255,204);
    background-repeat: no-repeat; vertical-align: top;  font-size: 10pt;  }
</style>
<!--[if IE 5]><style type="text/css">
  a.infobox span { display:none; }
  a.infobox:hover span { display:block; }
</style><![endif]-->
/* \Erklärung popup per Mouse over (hover) */

Das Resultat sieht man auf der Seite über die PV-Anzeige.