eine feste „Quick-Info“, wenn ein Eingang den Fokus erhält, mit jQuery

Question

Gesamt Anfänger Frage über jQuery:

ich ein Formular, das mehrere Textfelder (input type = „text“) enthält. Ich möchte eine Art Quickinfo anzeigen, wenn die TextBox den Fokus erhält und sie ausblenden, wenn sie den Fokus verliert. Idealerweise sollte der Tooltip eine Sprechblase auf der linken oder rechten Seite sein.

gegoogelt ich ein wenig und fand qTip for jQuery, aber das scheint ein Plugin für Tooltips zu sein, wenn sie über etwas schwebt, hat aber den layout and positioning, die ich will.

Mein naiver Versuch, es zu einem Textfeld zu binden:

$(function() { 
    $("input[id$=tbMyTextbox]").qtip({ 
     content: 'My Tooltip Text' 
    }); 
}); 

(Der Selektor funktioniert, ich bin mit #tbMyTextbox nicht, da es ASP.net ist, und ich bin nicht mit <% = tbMyTextBox.ClientID %> weil ich keinen Code in meiner .aspx-Datei haben kann, aber das ist nicht-Thema - der Selektor selbst funktioniert mit anderen Sachen, also nehme ich an, es ist in Ordnung.

Kann mir jemand einen Tipp geben, wie es funktionieren könnte oder mir von einem anderen jQuery-Plugin erzählen, das das tut?

Danke!

Edit: Danke, die Show Event macht den Trick!

$("input[id$=tbMyTextbox]").qtip({ 
     content: 'Test', 
     position: { 
      corner: { 
       target: 'rightMiddle', 
       tooltip: 'leftMiddle' 
      } 
     }, 
     show: { 
      when: { 
       event: 'focus' 
      } 
     }, 
     hide: { 
      when: { 
       event: 'blur' 
      } 
     } 
    }); 

Answer 1

Sie könnten Ihren Tooltip manuell in einem Element mit display:none versteckt schaffen, die in einem Fokus Event-Handler angezeigt werden würde.

$("input[id$=tbMyTextbox]").focus(function() { 
    $("div[id$=tooltip]").show(); 
}); 

$("input[id$=tbMyTextbox]").blur(function() { 
    $("div[id$=tooltip]").hide(); 
}); 

Eine andere Möglichkeit könnte die Verwendung der Option show in qTip sein. Ich habe noch nie qTip benutzt, also ist das rein theoretisch an meinem Ende, aber Sie sollten show: { when: { event: 'focus' } } in den Optionen angeben können.

http://craigsworks.com/projects/qtip/docs/reference/#show

Answer 2

$(function() { 
    $("input[id$=tbMyTextbox]").qtip({ 
     content: 'My Tooltip Text', 
     show: 'focus', 
     hide: 'blur' 
    }); 
});