Folgendes Problem:

Ich habe auf einer Seite eine unbestimmte Anzahl an Div-Containern die ausgeblendet sind (display: none;). Bei dem Klick auf eine Grafik soll der dazugehörige Container eingeblendet werden. Dabei soll die linke obere Ecke des Containers beim Mauszeiger liegen, so das der Benutzer halt das Gefühl hat der Container gehört zu der Grafik.

Ich denke es ist klar was gemeint ist.

Beim erneuten klick auf die Grafik, eine "Schließen" Links im Container oder bei dem verlassen des Containers mit dem Mauszeiger soll dieser wieder verschwinden. Der Benutzer muss aber wie geschrieben die Möglichkeit haben innerhalb des Containers zu interagieren. -> Klick auf einen Link o.Ä.

Meine bisherigen Erfahrungen mit JS gleichen fasst 0.

Mein Ansatz bisher ist folgendes Script:

tooltip.js
Quellcode:var tooltip = function () {
// private
  var addEvent = function (ele, e, cb) {
    if (typeof window.addEventListener != 'undefined') {
      ele.addEventListener(e, cb, false);
    }
    else {
      ele.attachEvent('on' + e, function(event) { cb(event) });
    }
  }

  var tooltips = function (obj, method, targetele) {
    return (function (e) {
      e = e || window.event;
      obj[method](e, this, targetele)
    });
  }  

  // puplic
  this.addtt = function (openele, targetele) {
    addEvent(openele, 'mouseover', tooltips(this, 'showtt', targetele));
    addEvent(openele, 'mouseout', tooltips(this, 'hidett', targetele));
    addEvent(openele, 'mousemove', tooltips(this, 'updatett', targetele));
  }  
}
      
tooltip.prototype.showtt = function (e, init, ele) {
  ele.style.display = 'block';
}
tooltip.prototype.hidett = function (e, init, ele) {
  ele.style.display = 'none';
}
tooltip.prototype.updatett = function (e, init, ele) {
  var x = ((document.all) && (!window.opera)) ? e.x + document.body.scrollLeft : e.pageX;
  var y = ((document.all) && (!window.opera)) ? e.y + document.body.scrollTop  : e.pageY;
  var abstand = 10;
  ele.style.left = (x + abstand) + 'px';
  ele.style.top = (y + abstand) + 'px';
}
index.html
Quellcode:<script type="text/javascript" src="js/tooltip.js"></script>
        <script type="text/javascript">
            window.onload = function () {
                 var tt = new tooltip;
                 tt.addtt(document.getElementById('test_1'), document.getElementById('tt_test_1'));
            }
        </script>
[...]

                    <div class="tooltip" id="tt_test_1">
                            <h2>Überschrift</h2>
                            <p>Inhalt.</p>
                    </div>
                    <span id="test_1">Weee!</span>
Wenn der Benutzer mit der Maus über den Text "Weee!" fährt wird der Div-Container mit der id "tt_test_1" sichtbar und zwar an der stelle wo der Curser sich befindet. Das klappt auch sehr gut, nur leider habe ich jetzt keine Idee wie ich da meinen Ansatz mit hinbekommen könnte. Außerdem will ich eben nicht für jeden neuen Container ein neues tt.addtt() aufrufen müssen.

Vielleicht hat ja jemand eine Idee. ;)

http://tooltip2.lubyte.de/