Wie machen tooltip mit reinem javascript (onclick show/entlassen)

Ich einige JS ohne JQuery-plugins stellen eine einfache tooltip.

Wenn ich auf das Bild klicken, ich möchte Anzeige-div mit Dreieck-Ecke Balg, das Bild mit etwas text hinein.

Ich google und google und habe nichts gefunden.

Einfach auf das Bild klicken um zu zeigen, "info" und klicken Sie auf dem gleichen Bild, um Sie zu schließen, aber kann nicht herausfinden, wie dies zu tun.


Wie machen tooltip mit reinem javascript (onclick show/entlassen)

  • Als ein Dreieck? In der Ecke?
  • Tun Sie das nicht möchten, verwenden Sie einen vorgefertigten jquery-plugin, oder wollen Sie nicht zu verwenden jquery überhaupt?
  • ja square-Bild 40x40px und wenn ich auf die Anzeige des Balges es ein div mit dem Dreieck in der oberen rechten Ecke unterhalb des Bildes.
  • kein jquery
  • Wenn Sie einen Blick auf die Rufannahme - /jsfiddle Sie werden sehen, dass die jquery benötigt, ist sehr gering. Könnte sein, lohnt sich, statt der reinen JS.
  • jquery ist gut, aber nicht die Antwort auf alles. Das Plakat gefragt, die speziell für eine Reine javascript-Lösung. Ich weiß nicht, der Grund in diesem Fall, aber es ist durchaus lehrreich, es zu tun, ohne jquery, und es kann sehr viel klarer und verständlicher code, ohne dass es.

InformationsquelleAutor 1110 | 2013-11-22
  1. 0

    Wenn Sie bereit sind, um jquery verwenden, nicht aber ein plugin, dann kann dies getan werden, ziemlich einfach.

    http://jsfiddle.net/GQE4k/

    var h = false;
$("#container").hover(function(){
    if (h == false){
        $("#popUp").fadeIn();
        $("#popUpText").fadeIn();
        h = true;
    }
},function(){
    if (h == true){
        $("#popUp").fadeOut();
        $("#popUpText").fadeOut(function(){h=false});
    }
});

    Klick statt hover:

    http://jsfiddle.net/GQE4k/1/

    var h = false;
$("#container").click(function(){
    if (h == false){
        $("#popUp").fadeIn();
        $("#popUpText").fadeIn(function(){h = true;});
    }
    if (h == true){
        $("#popUp").fadeOut();
        $("#popUpText").fadeOut(function(){h=false});
    }
});
    • Nein, sorry, vielleicht war ich nicht, sagte Recht, was ich tun will. Ich habe ein Bild von einem Beispiel.
    • das ist weit Weg von dem, was du als erstes geschrieben. Es wäre sehr freundlich, wenn Sie akzeptiert user2938649 Antwort, und öffnen Sie eine neue Frage.
    • Ok, ich werde es tun, sorry ich war nicht klar genug
    • Ich habe es hier, wenn Sie mir helfen können stackoverflow.com/questions/20154572/...
    • So 1110 ausdrücklich gebeten, für eine Reine javascript-Lösung, die ohne jquery, und Sie bitten, ihn zu akzeptieren, eine Antwort, die jquery nutzt? Ich muss zugeben, dass die Abfrage war unklar, aber das ist, was Kommentare sind, für eine Klärung. Es war jedoch deutlich vom Beginn, dass 1110 wollte ein reines javascript, nicht jquery-Lösung.
    InformationsquelleAutor user2938649
Schreibe einen Kommentar