Folgende geniale Idee stammt von Andreas Grünwald.

Hier mit der Maus drüberfahren!Das ist der Inhalt der Infobox. Auf diese Weise können Anmerkungen gemacht werden, ohne den Beitrag aufzublähen.

Um Infoboxen nutzen zu können müssen Sie die nachfolgenden CSS-Befehle im Design-Wizard eintragen:

a.informationsbox {border-bottom:1.0px dotted #00F; text-decoration:none !important;}
a.informationsbox:hover {color:blue !important; background:white;cursor:help;}
a.informationsbox span { visibility:hidden; position:absolute; padding:1.5em; text-decoration:none; width:30em; margin-top:2em; }
a.informationsbox:hover span { visibility:visible; color:blue; border:1px solid #F00; background:white; left:15em;}

Der Code im Blogbeitrag lautet dann wie folgt:

<a class="informationsbox" href="#dummyfeld"><strong>Hier mit der Maus drüberfahren!</strong><span>Text-Inhalt der Infobox.</span></a>

Praxisbeispiel

Erläuterungen zur Syntax:

  • Die Formatierungen in CSS können an die eigenen Bedürfnisse angepasst werden. Unabdingbar sind jedoch 1.) der Background-Befehl, 2.) Wertangaben für "visibility" und 3.) der Positionswert "absolute" für den Span-Teil.
  • "padding" steht für den Abtand des Textes zum Rahmen der Box.
  • Der width-Wert steht für die Breite der Infobox.
  • Der left-Wert steht für den linken Abstand des Textes in der Infobox.
  • Der margin-Top-Befehl steht für den oberen Abstand der Infobox vom zugehörigen Link.