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

[Linuchs]

<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>

CSS zur Klasse help <link rel=stylesheet href="css/helptext.css">:

/* *********************************************************************
 * remso 2016-03-15  zum Helpsystem gehoert
 * 
 * 1. Tabelle helptexte
 * 2. /000/p033_ajax.php
 * 3. <link rel=stylesheet      href="css/helptext.css">
 * 4. <script src="css/ajax_getHelptext.js"></script>
 
 <span class="help">
  <span onclick="getHelptext( '[HOST]', '0', '[kw]', '[ll]', 'treffpunkt', '[sprache]' )"><b>N</b></span>
  <span id='treffpunkt_help' onclick="this.style.display='none';"></span>
</span><!-- oder <img src="img/icon_hilfe.gif" alt="?" /> -->

 * 
 * ********************************************************************* */

/* 2016-03-09 */
span.help { /* Umgebung fuer Helptext */
  position: relative;
}
span.help span:nth-of-type(1) { /* Klick-Bereich */
  color: #00a;
  cursor: help;
}
span.help span:nth-of-type(1) img { /* wenn Bild als Klick-Bereich */
  height: 1em;
}
span.help span:nth-of-type(2) { /* Helptext-Feld */
  position: absolute;
  font-size: 12pt; /* unabhaengig von h1, p, ... */
  white-space: normal;
  display: none;
  left: -12em;
  width: 30em;
  top: 1.7em;
  padding: 5px;
  background-color: #ffc;
  border: 1px solid #f00;
  border-radius: 4px;
  color: #000;
  text-align: left;
  z-index: 2;
  cursor: normal;
}
span.help>b { /* fetter Feld-Buchstabe */
  color: #00a;
  cursor: help;
}
/* ENDE */