• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Tooltip an Anmerkungszeichen ausrichten

Status
Für weitere Antworten geschlossen.

Heinrich23

Neues Mitglied
Hallo Zusammen,
ich bin neu hier und benötige eure Hilfe.
Ich verwende auf meiner Webseite für den Anmerkungen ein unsichtbares DIV, dass ich bei Anklicken einblende. Bis jetzt erscheint das DIV mit einem prozentualen Abstand von oben. Ich möchte nun aber, dass das DIV 10 px unterhalb des Anmerkungszeichens (<sup>&diams;</sup>) erscheint. Was muss ich in meinen Quelltext (s.u.) einfügen bzw. wie diesen umbauen, damit es funktioniert?
Ich habe überlegt, über die aufgerufene Funktion die Mauszeigereposition abzufragen und dann zu übergeben, hab es aber nicht hinbekommen. Es würde mich deshalb freuen, wenn mir jemand von euch weiterhelfen könnte.
Gruß
Heinrich

QUELLTEXT:

HTML
HTML:
Text<a href="javascript:qu_an_ein('qa-bi-1')"><sup>&diams;</sup></a>
qa-bi-1 ist die ID des DIV, das in diesem Fall angezeigt werden soll


JavaScript
Code:
// *****  Quellen / Anmerkungen *****
// *** Quelle / Anmerkung einblenden ***
function qu_an_ein(qu_an_id)
{
  document.getElementById(qu_an_id).className = "cl_qu_ein";
}


CSS
Code:
/**********  Quellen / Anmerkungen **********/
/***** Quelle / Anmerkung eingeblendet *****/
.cl_qu_ein
{
  display: inline;
  background-color: #99CCFF;
  border: 1px solid #99CCFF;
  border-radius: 10px;
  width: 700px;
  padding: 10px 17px;
  position: fixed;
  top: 30%;
  left: 30%;
}
 
Werbung:
Ich empfehle, das div in das a-Tag aufzunehmen und absolut zu positionieren. Dann kannst Du mit top/bottom und left die Position zu dem Anmerkungszeichen festlegen.
Nicht vergessen, dem a-Tag position:relative zu geben.
Nichts anderes beinhalten/thematisieren meine zuvor empfohlenen Links :cool:
 
Werbung:
Status
Für weitere Antworten geschlossen.
Zurück
Oben