Latest web development tutorials

jQuery UI API - membro scatola tooltip (Tooltip Widget)

categoria

Widget (Widget)

uso

Descrizione: personalizzabile, scatola tooltip themable, sostituire la scatola tooltip nativo.

Nuova versione: 1.9

scatola Tooltip (Tooltip) ha sostituito la scatola tooltip nativo, in modo che possano tematizzazione, permette anche diverse personalizzazioni:

  • Visualizzare non solo il titolo di altri contenuti, così come note o in linea di Ajax per recuperare il contenuto aggiuntivo.
  • targeting personalizzato, ad esempio, centrata sulla casella elemento tooltip.
  • Aggiungere stili aggiuntivi per personalizzare l'aspetto di una regione avvertimento o di errore.

Un'animazione gradiente di default per mostrare e nascondere scatola tooltip, rispetto alla semplice commutazione della visibilità di tale aspetto più spirituale. Questo può show e hide opzioni di personalizzazione.

items e content opzioni hanno bisogno di tenere il passo. Se si modifica uno, è necessario cambiare l'altro.

In generale, gli elementi disabili non attivano eventi DOM. Pertanto, uno strumento appropriato per controllare il pallone elemento disattivato non è possibile, perché abbiamo bisogno di ascoltare gli eventi per determinare quando per mostrare e nascondere scatola tooltip. Questo porta a jQuery UI non può garantire il supporto per l'elemento disabile attaccato alla scatola punta dell'utensile a qualsiasi livello. Questo significa che se avete bisogno di essere richiesto per gli elementi disabili, potrebbe essere necessario utilizzare una miscela di scatola balloon tooltip nativo e jQuery UI.

tematizzazione

membro scatola Tooltip (Tooltip Widget) utilizzando framework jQuery UI CSS per definire l'aspetto del suo stile. Se è necessario utilizzare la casella di stile tooltip specificato, è possibile utilizzare il seguente nome della classe CSS:

  • ui-tooltip : scatola tooltip contenitore esterno.
    • ui-tooltip-content : tooltip contenuti scatola.

fare affidamento

Ulteriori informazioni

  • La parte richiede un po 'di CSS funzionale, altrimenti non funzionerà. Se si crea un tema personalizzato, utilizzare il file CSS widget di specificato come punto di partenza.

Esempi

Utilizzare tutti gli elementi con l'attributo titolo del broker evento, per creare una casella di punta dell'utensile (Tooltip) sul documento. 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> membro scatola tooltip (Tooltip Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.10.2.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<P>
  <a href="#" title="锚描述"> anchor text </a>
  <Title = ingresso "Input Help">
</ P>
<Script>
  $ (Document) .tooltip ();
</ Script>
 
</ Corpo>
</ Html>