Programmdokumentation: Help-Texte anzeigen

[Linuchs]

Liebe Selfgemeinde,

Frage: Wie kann ich Helptexte einblenden, die nicht über den Viewport hinausragen und die nicht von der Umgebung CSS erben?

Helptexte erscheinen durch Klick auf ein Symbol im Fließtext. Sie sind Teil der Programm-Dokumentation in Form einer kurzen Erklärung und können per Link auf ausführliche Artikel verweisen. Sie können von Administratoren bearbeitet werden.

Ein Helptext sieht nach Klick auf den Buchstaben A in einer HTML-Tabelle im Idealfall so aus:

Aber er kann auch so verunglückt daherkommen. Das Help-Icon ? sitzt so weit links, dass der angekoppelte und absolut positionierte Help-Container zum Teil nicht sichtbar ist. Ausserdem erbt er die Fettschrift und dem margin:0 für p Tags:

Das Problem ist für mich, einen eigenständigen Container (position:absolute) an einen Buchstaben (ein Image) anzukoppeln und dafür zu sorgen, dass er innerhalb des Viewports bleibt und CSS unabhängig ist von seiner Umgebung.

Mir fehlt eine Idee. Zur Zeit kopple ich so. Parameter sind Domain, Mandant, Admin, dessen Berechtigung, Helpname, Sprache:

<span class="help">
  <span onclick="getHelptext( 'remso.eu', '0', '[ich]', '[meinZugang]', 'p000', 'de' )"><img src="img/icon_hilfe.gif" alt="?" title="Helptext" /></span>
  <span id='p000_help' onclick="this.style.display='none';"></span>
</span>

Linuchs