2009-07-23 13 views
10

Totale domanda principiante su jQuery:Visualizzare un "Tooltip" fisso quando un ingresso riceve concentrarsi, utilizzando jQuery

Ho una forma che contiene diversi TextBoxes (input type = "text"). Vorrei visualizzare una sorta di suggerimento quando il TextBox riceve lo stato attivo e lo nasconde quando perde lo stato attivo. Idealmente, il suggerimento dovrebbe essere una bolla "vocale" sul lato sinistro o destro.

Ho cercato su Google un po 'e ho trovato qTip for jQuery, ma questo sembra essere un plugin per suggerimenti quando si passa sopra qualcosa, ma ha il layout and positioning che voglio.

Il mio tentativo ingenuo di legarsi a una casella di testo:

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

(Le opere di selezione, non sto usando #tbMyTextbox dal momento che è ASP.net, e non sto usando <% = tbMyTextBox.ClientID %> perché non posso avere alcun codice nel mio file .aspx, ma è fuori argomento - il selettore stesso funziona con altre cose, quindi presumo che vada bene.).

Qualcuno può darmi un suggerimento su come potrebbe funzionare o parlarmi di un diverso plugin jQuery che lo fa?

Grazie!

Modifica: Grazie, l'evento Show fa il trucco!

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

risposta

12

Si potrebbe creare il tooltip manualmente in un elemento nascosto con display:none che sarebbe mostrato in un gestore di eventi messa a fuoco.

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

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

Un'altra possibilità potrebbe essere l'utilizzo dell'opzione di visualizzazione in qTip. Non ho mai usato qTip, quindi questo è puramente teorico da parte mia, ma dovresti essere in grado di specificare show: { when: { event: 'focus' } } nelle opzioni.

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

+0

Grazie, che ha funzionato! –

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

Forse potresti elaborare nella tua risposta perché questo è "il modo semplice" o meglio della risposta accettata? Grazie. – Kev

+0

modo semplice, non richiede alcun tipo di codice lungo. – toha

Problemi correlati