Wie um zu zeigen, title-Attribute onfocus mithilfe von jquery?

Standardmäßig in allen Browsern, title-Attribute nur zeigen, wenn Maus darüber. Ich will mich zeigen, auf der Tastatur konzentrieren. Ich weiß, das ist nicht möglich, nur durch HTML und CSS.

Wird JavaScript benötigt. also ich benutze jquery in fast allen Projekten. also ich brauche eine jquery Lösung zur Anzeige von Titel-auf onfocus.

<a title="this is title" href="#">Websites</a>

Später Hinzugefügt:

Nach der Suche eine Menge über google fand ich eine javascript-Lösung

Nun brauche ich nur noch ein jquery-version dieses

siehe hier : http://www.brothercake.com/scripts/tooltips/tooltips.html

InformationsquelleAutor Jitendra Vyas | 2010-03-21

  1. 2

    JS-code

    $(function() {
        var xOffset = 10;
        var yOffset = 20;

        $("input").focus(function(e) {
            this.t = this.title;
            this.title = "";
            $("body").append("<span id='tooltip'>" + this.t + "</span>");
            $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
        });

        $("input").blur(function(e) {
            this.title = this.t;
            $("#tooltip").remove();

            $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");   
        });   
    });

    CSS

     #tooltip{
  position:absolute;
  border:1px solid #333;
  background:#f7f5d1;
  padding:2px 5px;
  color:#333;
  display:none;
  }

    dem HTML-element

     <input title="testing the focus tooltip" name="name" type="text"/>

    Nur für den Spaß der Codierung hier das gleiche, aber für Einen link element

    $('a').click(function(e) {
    e.preventDefault();
  this.focus(function (e) {
      this.t = this.title;
      this.title = "";                    
    $("body").append("<span id='tooltip'>"+ this.t +"</span>");
    $("#tooltip")
      .css("top",(e.pageY - xOffset) + "px")
      .css("left",(e.pageX + yOffset) + "px")
      .fadeIn("fast");    
    });
});

 <a title="fdsfsdfsd" href="javascript:;" >test a foucs</a>
    ist dieses jquery-code? Haben u gesehen, mein link Hinzugefügt, in Frage
    sorry, ich habe nicht gelesen, den link Hinzugefügt, obwohl, das ist der einfache Weg, ich weiß für make-tooltip! und ja, es ist jquery! hoffe diese Hilfe!
    ah, eh, die Methode ist fast die gleiche, erhalten Sie position, nehmen Sie die Fokus-Ereignis Titel, fügen Sie Titel, um Körper, zeigen Sie es sich einbilden, es zu entfernen, starten Sie wieder...! 😉
    wird dieser code funktioniert auch ohne jquery-Bibliothek? oder jquery nicht benötigt
    diese erfordern jquery! 🙁 wenn Sie wollen "raw" JS-tooltip im kleinen code, versuchen Sie diese sixrevisions.com/tutorials/javascript_tutorial/...

    InformationsquelleAutor Luca Filosofi

  2. 1

    Gibt es eine Reihe von plugins wie qTip , lassen Sie dies tun in einer cross-browser-Mode. Ich Zweifel, die Sie auslösen können, die native tooltip zuverlässig. qTip-code ist ganz einfach:

    $('ul:last li.active').qtip({
   content: 'This is an active list element',
   show: 'mouseover',
   hide: 'mouseout'
})

    Ich bin mir nicht sicher, ob es unterstützt mehrere Ereignisse (in Ihrem Fall, mouseover-und focus).

    Ich will nicht diese Art der Sache. ich will nur zeigen-browser Standard-mouseover-tooltip onfocus
    Ich glaube nicht, dass das möglich ist. Das ist eine Funktion, die die Links zu den einzelnen Browser zu implementieren, und ist nicht etwas, das zugänglich ist über den code glaube ich nicht, sorry.
    es ist möglich - siehe meine aktuelle Frage
    Gut, Nein, es ist nicht möglich, oder zumindest die Quelle, die Sie nicht zeigen, es ist. Das Skript, das Sie, sofern die Verbindung für die divs erstellt und bearbeitet Sie, aber es löst keine der browser-native tooltip-Mechanismus.

    InformationsquelleAutor Tom Bartel

  3. 0

    Fragen Sie den Autor Onfocus tooltips zu verwenden, ist Ihr code.

    jQuery ist nicht erforderlich, da der code ermöglicht die tooltipping für alle Elemente im Dokument. Sie müssen möglicherweise ändern Sie das Skript selbst, wenn Sie wollen, um die QuickInfo-Elemente, die dynamisch generiert werden.

    InformationsquelleAutor strager

Schreibe einen Kommentar