jQuery UI esempio - scatola tooltip (suggerimenti)

Precedente: jQuery UI Esempio - schede (Tabs)

Successivo: jQuery UI Esempio - effetti speciali (effetto)

Personalizzabile, scatola tooltip themable, sostituire la scatola tooltip nativo.

Per ulteriori dettagli sul membro tooltip, consultare la documentazione API membro scatola tooltip (suggerimenti il Widget) .

La funzione di default

Passa sul link, o usare il tasto Tab per passare il fuoco su ogni elemento.

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> di dialogo jQuery UI tooltip (Tooltip) - Funzione di default </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ (Document) .tooltip ();
  });
  </ Script>
  <Style>
  label {
    display: inline-block;
    Larghezza: 5em;
  }
  </ Style>
</ Head>
<Body>
 
<P> <a href="#" title="部件的名称"> Tooltip </a> può essere associato a qualsiasi elemento. Quando si passa sopra l'elemento, la proprietà titolo verrà visualizzato in una piccola casella accanto all'elemento, come nativo come una scatola comandi. </ P>
<P> Tuttavia, poiché non è una scatola tooltip nativo, in modo che possa essere definito stili. Tema di <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> creato può anche essere definito stili scatola di conseguenza tooltip. </ P>
<P> casella descrizione comando può anche essere usato per formare gli elementi da visualizzare in ciascuna regione alcune informazioni aggiuntive. </ P>
<P> <label for = "età"> la tua età: </ label> <input id = "età" title = ". Età viene utilizzato solo a fini statistici"> </ p>
<P> il mouse sopra l'area corrispondente per visualizzare una casella di punta dell'utensile. </ P>
 
 
</ Corpo>
</ Html>

stile personalizzato

Passa sul link, o usare il tasto Tab per passare il fuoco su ogni elemento.

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> box tooltip jQuery UI (Tooltip) - stile personalizzato </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ (Document) .tooltip ({
      Posizione: {
        il mio: "in basso al centro-20",
        in: "in alto al centro",
        utilizzando: la funzione (posizione, feedback) {
          $ (This) css (posizione);
          $ ( "<Div>")
            .addClass ( "freccia")
            .addClass (feedback.vertical)
            .addClass (feedback.horizontal)
            .appendTo (questo);
        }
      }
    });
  });
  </ Script>
  <Style>
  .ui-tooltip, .arrow: dopo {
    sfondo: nero;
    border: 2px solido bianco;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: 14px grassetto "Helvetica Neue", sans-serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px nero;
  }
  .arrow {
    width: 70px;
    Altezza: 16px;
    overflow: hidden;
    position: absolute;
    sinistra: 50%;
    margin-left: -35px;
    in basso: -16px;
  }
  .arrow.top {
    top: -16px;
    in basso: auto;
  }
  .arrow.left {
    sinistra: 20%;
  }
  .arrow: dopo {
    tenore: "";
    position: absolute;
    sinistra: 20px;
    top: -20px;
    width: 25px;
    Altezza: 25px;
    box-shadow: 6px 5px 9px -9px nero;
    -webkit-transform: rotate (45 gradi);
    -moz-transform: rotazione (45 gradi);
    -ms-transform: ruotare (45 gradi);
    -o-transform: rotate (45 gradi);
    trasformata di: rotazione (45 gradi);
  }
  .arrow.top: dopo {
    in basso: -20px;
    top: auto;
  }
  </ Style>
</ Head>
<Body>
 
<P> <a href="#" title="部件的名称"> Tooltip </a> può essere associato a qualsiasi elemento. Quando si passa sopra l'elemento, la proprietà titolo verrà visualizzato in una piccola casella accanto all'elemento, come nativo come una scatola comandi. </ P>
<P> Tuttavia, poiché non è una scatola tooltip nativo, in modo che possa essere definito stili. Tema di <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> creato può anche essere definito stili scatola di conseguenza tooltip. </ P>
<P> casella descrizione comando può anche essere usato per formare gli elementi da visualizzare in ciascuna regione alcune informazioni aggiuntive. </ P>
<P> <label for = "età"> la tua età: </ label> <input id = "età" title = ". Età viene utilizzato solo a fini statistici"> </ p>
<P> il mouse sopra l'area corrispondente per visualizzare una casella di punta dell'utensile. </ P>
 
 
</ Corpo>
</ Html>

Animazione personalizzata

Questo esempio dimostra come utilizzare lo spettacolo e nascondere le opzioni per personalizzare l'animazione, è anche possibile utilizzare l'evento aperto per personalizzare l'animazione.

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> box tooltip jQuery UI (Tooltip) - Animazione personalizzata </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "# Show-opzione") .tooltip ({
      Mostra: {
        Effetto: "slideDown",
        Ritardo: 250
      }
    });
    $ ( "# Hide-opzione") .tooltip ({
      nascondere: {
        Effetto: "esplodere",
        Ritardo: 250
      }
    });
    $ ( "# Open-evento") .tooltip ({
      spettacolo: null,
      Posizione: {
        il mio: "in alto a sinistra",
        in: "in basso a sinistra"
      },
      aperto: funzione (evento, ui) {
        ui.tooltip.animate ({top: ui.tooltip.position () in alto + 10}, "veloce");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Ci sono un certo numero di modi per personalizzare tooltip di dialogo Animazione. </ P>
<P> È possibile utilizzare <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="向下滑动显示"> spettacolo </a> e <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="爆炸隐藏"> nascondere </a> opzione. </ P>
<P> È inoltre possibile utilizzare <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="向下移动显示"> aperto </a> evento. </ P>
 
 
</ Corpo>
</ Html>

contenuto personalizzato

Dimostrare come personalizzare gli elementi e le opzioni di contenuti di combinare diversi box tooltip evento delegato a una singola istanza.

Potrebbe essere necessario mappare l'interazione scatola tooltip, che è una versione futura della funzione da realizzare.

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> di dialogo jQuery UI tooltip (Tooltip) - Contenuto personalizzato </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .photo {
    width: 300px;
    text-align: center;
  }
  .photo .ui-widget di-header {
    margin: 1em 0;
  }
  .map {
    width: 350px;
    altezza: 350px;
  }
  .ui-tooltip {
    max-width: 350px;
  }
  </ Style>
  <Script>
  $ (Function () {
    $ (Document) .tooltip ({
      voci: "img, [data-geo], [titolo]",
      contenuti: function () {
        var elemento = $ (this);
        if (element.is ( "[data-geo]")) {
          var text = element.text ();
          ritorno "<img class = 'mappa' alt = '" + testo +
            " 'Src =' http: //maps.google.com/maps/api/staticmap?" +
            "Zoom = 11 & size = 350x350 & maptype = terreno & sensore = false & centro =" +
            text + " '>";
        }
        se (element.is ( "[titolo]")) {
          tornare element.attr ( "titolo");
        }
        if (element.is ( "img")) {
          tornare element.attr ( "alt");
        }
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "ui-widget di photo">
  <Div class = "ui-widget di intestazione-ui-angolo-all">
    <H2> Cattedrale di Santo Stefano (Stephansdom) </ h2>
    <H3> <a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" data-geo=""> Vienna, Austria (Vienna, Austria) </a> < / h3>
  </ Div>
  <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
    <Img src = "../ wp-content / uploads / 2014/03 / st-stephens.jpg" alt = "Cattedrale di Santo Stefano (S. Stefano & APOS; s Cathedral)" class = "ui-angolo-all">
  </a>
</ Div>
 
<Div class = "ui-widget di photo">
  <Div class = "ui-widget di intestazione-ui-angolo-all">
    <H2> Tower Bridge (Tower Bridge) </ h2>
    <H3> <a href="http://maps.google.com/maps?q=london,+england&amp;z=11" data-geo=""> London (Londra, Inghilterra) </a> < / h3>
  </ Div>
  <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
    <Img src = "../ wp-content / uploads / 2014/03 / torre-Bridge.JPG" alt = "Tower Bridge (Tower Bridge)" class = "ui-angolo-all">
  </a>
</ Div>
 
<P> Tutte le immagini dal <a href="http://commons.wikimedia.org/wiki/Main_Page"> Wikimedia Commons </a>, e sono di proprietà di <a href = "http://creativecommons.org/ licenze / by-sa / 3.0 / deed.en "title =" creative Commons Attribuzione-Condividi allo stesso modo 3.0 "> CC bY-SA 3.0 </a> sotto detentori del copyright. </ P>
 
 
</ Corpo>
</ Html>

modulo

Utilizzare il pulsante sottostante per visualizzare il testo della guida, o semplicemente lasciare che la tua muovere il mouse sulla casella di immissione o di avere la casella di immissione è attiva, è possibile visualizzare il testo di aiuto casella di input corrispondente.

Definire una larghezza fissa in CSS, in modo che visualizza simultaneamente tutto il testo di aiuto appare più coerente.

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> di dialogo jQuery UI tooltip (Tooltip) - Forme </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  label {
    display: inline-block; width: 5em;
  }
  fieldset div {
    margin-bottom: 2em;
  }
  .help fieldset {
    display: inline-block;
  }
  .ui-tooltip {
    width: 210px;
  }
  </ Style>
  <Script>
  $ (Function () {
    var tooltip = $ ( "[titolo]") .tooltip ();
    $ ( "<Button>")
      .text ( "Mostra help")
      apri un ()
      .Click (function () {
        tooltips.tooltip ( "aperto");
      })
      .insertAfter ( "modulo");
  });
  </ Script>
</ Head>
<Body>
 
<Form>
  <Fieldset>
    <Div>
      <Label for = "Nome"> nome </ label>
      <Input id = nome "cognome" = titolo "Nome" = "Si prega di fornire il proprio nome.">
    </ Div>
    <Div>
      <Label for = "cognome"> Cognome </ label>
      <Id = nome di ingresso "cognome" = "Cognome" title = "Si prega di fornire il tuo cognome.">
    </ Div>
    <Div>
      <Label for = "indirizzo"> indirizzo </ label>
      <Id = "indirizzo" input name = titolo "Indirizzo" = "la vostra casa e del lavoro di indirizzo.">
    </ Div>
  </ Fieldset>
</ Form>
 
 
</ Corpo>
</ Html>

Rilevamento mouse

In questa finestra tooltip esempio viene posizionato in relazione al mouse, quando il mouse passa sopra l'elemento, esso seguirà il movimento del mouse.

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> di dialogo jQuery UI tooltip (Tooltip) - Monitoraggio del mouse </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  label {
    display: inline-block;
    Larghezza: 5em;
  }
  </ Style>
  <Script>
  $ (Function () {
    $ (Document) .tooltip ({
      pista: true
    });
  });
  </ Script>
</ Head>
<Body>

<P> <a href="#" title="部件的名称"> Tooltip </a> può essere associato a qualsiasi elemento. Quando si passa sopra l'elemento, la proprietà titolo verrà visualizzato in una piccola casella accanto all'elemento, come nativo come una scatola comandi. </ P>
<P> Tuttavia, poiché non è una scatola tooltip nativo, in modo che possa essere definito stili. Tema di <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> ThemeRoller </a> creato può anche essere definito stili scatola di conseguenza tooltip. </ P>
<P> casella descrizione comando può anche essere usato per formare gli elementi da visualizzare in ciascuna regione alcune informazioni aggiuntive. </ P>
<P> <label for = "età"> la tua età: </ label> <input id = "età" title = ". Età viene utilizzato solo a fini statistici"> </ p>
<P> il mouse sopra l'area corrispondente per visualizzare una casella di punta dell'utensile. </ P>
 
 
</ Corpo>
</ Html>

Video Player

Un giocatore di video virtuale con una quota di pulsante mi piace / / statistiche, ogni pulsante con la scatola di stili personalizzati tooltip.

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> box tooltip jQuery UI (Tooltip) - Video Player </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
  <Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .player {
    width: 500px;
    altezza: 300px;
    border: 2px scanalatura grigio;
    fondo: rgb (200, 200, 200);
    text-align: center;
    line-height: 300px;
  }
  .ui-tooltip {
    border: 1px solido bianco;
    fondo: RGBA (20, 20, 20, 1);
    color: white;
  }
  .Set {
    display: inline-block;
  }
  .notification {
    position: absolute;
    display: inline-block;
    font-size: 2em;
    padding: .5em;
    box-shadow: 2px 2px 5px -2px rgba (0,0,0,0.5);
  }
  </ Style>
  <Script>
  $ (Function () {
    funzione di notifica (ingresso) {
      var msg = "Selected" + $ .trim (input.data ( "tooltip-title") || input.text ());
      $ ( "<Div>")
        .appendTo (document.body)
        .text (msg)
        .addClass ( "notifica ui-stato-default ui-angolo-bottom")
        .position ({
          il mio: "in alto al centro",
          in: "in alto al centro",
          di: window
        })
        .Show ({
          Effetto: "alla cieca"
        })
        .delay (1000)
        .nascosto ({
          Effetto: "alla cieca",
          durata: "slow"
        }, Function () {
          $ (Questo) .Remove ();
        });
    }
 
    $ ( "Button") .Ogni (function () {
      Pulsante var = $ (this) apri un ({
        Icone: {
          primaria: $ (this) .data ( "icona")
        },
        testo: !! $ (this) .attr ( "titolo")
      });
      button.click (function () {
        comunicare (pulsante);
      });
    });
    $ ( ".set") .buttonset ({
      articoli: "bottone"
    });
 
    $ (Document) .tooltip ({
      Posizione: {
        il mio: "in alto al centro",
        in: "in basso al centro + 5",
      },
      Mostra: {
        durata: "veloce"
      },
      nascondere: {
        Effetto: "nascondere"
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "giocatore"> Ecco il video (HTML5?) </ Div>
<Div class = "strumenti">
  <Span class = "set">
    <Pulsante data-icon = "ui-icon-cerchio-freccia-n" title = "Mi piace questo video"> come </ button>
    <Pulsante data-icon = "ui-icon-cerchio-freccia-s"> Non mi piace questo video </ button>
  </ Span>
  <Div class = "set">
    <Pulsante data-icon = "ui-icon-cerchio-plus" title = "Aggiungi alla playlist"> Aggiungi </ button>
    <Classe Button = "menu" Dati-icon = "ui-icon-triangolo-1-s"> Aggiungi ai Preferiti </ button>
  </ Div>
  <Title Pulsante = "Condividi questo video"> Condividi </ button>
  <Pulsante data-icon = "ui-icon-alert"> segnalato come inadeguato <tasto />
</ Div>
 
 
</ Corpo>
</ Html>

Precedente: jQuery UI Esempio - schede (Tabs)

Successivo: jQuery UI Esempio - effetti speciali (effetto)

jQuery UI corso

jQuery UI tema

jQuery UI Component Library

jQuery UI Manuale di riferimento

jQuery UI Esempi