Tooltip mit "class" und "onclick" realisieren.

[Mahriel]

Ah super danke. Das wars.
Nur noch was. Das Tooltip geht jetzt auf, nur verrutscht es alle anderen Divs. Ich möchte das das Tooltip als oberste Ebene dann sichtbar ist, ohne das etwas verrutscht.?

Edit: Danke, ist erledigt. ^^ Kleine Probleme mit dem Z-Index, aber ich habs eh schon geschafft.
Viel danke nochmal an dich, Crack .

 

[Zenti]

Du darfst deinen Tooltip nicht auf "float:left" setzen. Du musst für das Tooltip Hauptelement "position:absolute" verwenden.

Beispiel:

<script src="http://code.jquery.com/jquery-2.0.0b2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<style>
.tooltip-icon {
     float:left;
     background-image:url(/dein/pfad/zum-icon.png);
     width:15px;
     height:15px;
}
.tooltip-layer {
     display:none;
     position:absolute;
     background-image:url(/dein/pfad/zum-tooltip.png);
     width:350px;
     height:200px;
     margin-left:50px; /* Hier kannst du die Position deines Tooltips anpassen. bsp: -25px; (nach Links ) 25px (nach rechts) */
     margin-top:-25px; /* Ebenson,.. nur nach unten oder nach oben,.. einfach mal rum probieren.  */
     z-index:20;  /* Damit bestimmst du die Ebenen. (10 -> 20-> 30,... wie dus halt definiert hast) wenn du noch keinen z-index verwendest, ist es egal wie hoch die Zahl ist,.. Hauptsache höher als eins,.. ich nehm immer 20 oder irgend was hohes,... das nächste element was du bestimmst und drüber liegen soll hat dann z.B. "z-index:50;"  */

}
</style>
<script>
    $(function () {
      $(document).on('click', function (e) {
        if (!$(e.target).is('.tooltip-icon')) {
          $('.tooltip-layer').fadeOut();
        }
      });
      $('.tooltip-icon + .tooltip-layer').prev().on('click', function () {
        var $this = $(this).next();
        $('.tooltip-layer').not($this).fadeOut();
        $this.fadeToggle();
      });
    });
</script>

<div class="tooltip-icon"></div>

<div class="tooltip-layer">
     hier sind deine Tooltip Elemente drin.
</div>

Hoffe konnte dir helfen.
Schönen Abend

Zenti