Linuchs: Help-Feld rechts / links vom Cursor positionieren

Beitrag lesen

SELF-Forum

Help-Feld rechts / links vom Cursor positionieren

Linuchs
– Informationen zu den Bewertungsregeln

Moin,

in HTML-Seiten habe ich ein absolut positioniertes Feld, das mit Text aus der Datenbank gefüllt wird und aufpoppt, wenn ich ein Help-Symbol anklicke.

Ich werte die x- und y- position des Mauszeigers aus und setze left und top in px.

Help-Symbole nahe des rechten Fensterrands führen dazu, dass das Help-Feld auswandert. Da möchte ich das Feld dann nach links aufklappen lassen, aber wie setze ich die Angabe für left ausser Kraft?

div#helptext {
  position: absolute;
  display: none;
  left: 5px;
  width: 25em;
  top: 5px;
  min-height: 5em;
  background-color: #ffc;
  border: .1pt solid #f00;
  border-radius: 4px;
  padding: 5px;
  z-index: 5;
}

<body>
<div id="helptext" onclick="this.style.display='none'"></div>

  ...
  // Helpfeld auf Klickposition positionieren
  if ( x > window.innerWidth /2 ) {
    document.getElementById( "helptext" ).style.left  = "";
    document.getElementById( "helptext" ).style.right = (window.scrollX +x -5) +"px";
  } else {
    document.getElementById( "helptext" ).style.left  = (window.scrollX +x +5) +"px";
    document.getElementById( "helptext" ).style.right = "";
  }
  ...

Nun "klebt" das nach links ausgeklappte Feld am linken Festerrand, als ob ich .left = "0" angegeben hätte. Auch .left ="auto" und .left = "inherit" führten nicht dazu, dass das Feld horizontal am Cursor hängt.

Linuchs

Beitrag melden
–
Informationen zu den Bewertungsregeln