Wie um zu zeigen, eine einfache textbox, wenn ich den Mauszeiger über ein Symbol mit jquery

Ich habe ein Eingabefeld in einem html-und einem Hilfe-Symbol (?) neben dem Feld,
Wenn ich den Mauszeiger über das Symbol, ich will einen einfachen text-Nachricht angezeigt wird und den text der Meldung sollte verschwinden, wenn Sie den Mauszeiger Weg.
Jeder Weg, dies zu tun mit jquery?

Symbol ist ein einfaches Bild, sagen ein kleines Fragezeichen.
Der text "Geben Sie Ihren Namen in das Feld"

Verwenden title - Attribut im img-oder onehackoranother.com/projects/jquery/tipsy, um es fanicer

InformationsquelleAutor Haran Murthy | 2012-08-02

  1. 7

    Können Sie "tooltip" zu Reisen, den text mit der Maus, während Sie es auf das Symbol,

    Ist hier ein gutes Beispiel.

    http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/

    Dies ist auch ein gutes Beispiel, Sie können implementieren, die Maus in einer ähnlichen Art und Weise!

    http://api.jquery.com/mouseover/

    Überprüfen Sie auch dieses Beispiel,

    http://jsfiddle.net/DLQsX/

    Für tooltip-ich sehe die Browser-tool-Tipp als auch die ist lästig, wie kann ich das entfernen, dass wenn ich den Mauszeiger über
    Es wird deutlich erwähnt im Beispiel. In javascript wird in Zeile $(this).Daten ("tipText', title).removeAttr('title'); entfernt Er den Titel so zu verhindern, dass das Fenster zeigt seine eigenen tool-tip, oder sagen Sie den Titel des Elements. Überprüfen Sie erneut!
    Was er macht, ist das erstellen einer benutzerdefinierten Titel, den Sie anzeigen möchten, die auf mouseover und entfernen der Titel, so dass Fenster nicht angezeigt, der Titel des Elements und deine msg wird angezeigt. Dann nach der mouseover-Effekt vorbei ist, zieht Sie die Titel.
    Wenn ich es öffnen, bei firefox aber ich sehe nicht ein, aber es erscheint im IE
    Funktioniert Prima für mich in firefox!!!!!

    InformationsquelleAutor MJQ

  2. 9

    Erstellen eines DOM-Elements auf der fly, dann positionieren Sie es fest mit dem offset des Zielelements. Sie können anfügen die Erstellung des Elements auf den mousein-Ereignis und der Zerstörung auf dem mouseout-Ereignis des target-Elements.

    Vorausgesetzt, Ihr Ziel-element hat eine id myId:

    Fügen Sie diese zu Ihrem on-ready-Funktion, oder ein script-tag nach der myId-element deklariert wurde:

    $('#myId').mouseenter(function(){
    $('body').append("<div id='hoveringTooltip' style='position:fixed;'></div>");
    $('#hoveringTooltip').html("MY TOOLTIP TEXT GOES HERE");
    $('#hoveringTooltip').css({
        "top" : $(this).offset().top + MYTOPOFFSET,
        "left" : $(this).offset().left + MYLEFTOFFSET
    });
});
$('#myId').mouseleave(function(){
    $('#hoveringTooltip').remove();
});
    Dies ist ein schöner code!
    Danke. Versuchen zu lernen, die Seile SO

    InformationsquelleAutor Mindwin

  3. 3

    Finden Sie in der jQuery hover-Ereignis.

    $("#help_icon").hover(function(){
    $("#msg_div").hide();
    $("#msg_div").show();
});

    InformationsquelleAutor jjclarkson

  4. 1
    $("#help_icon").hover(
  function () {
    $("#msg_div").show();
  }, 
  function () {
    $("#msg_div").hide();
  }
);

    aus dem gleichen link wie jjclarkson Antwort

    InformationsquelleAutor joevallender

Schreibe einen Kommentar