Latest web development tutorials

jQuery UI Beispiel - Tooltip-Box (Tooltip)

Anpassbare, Themable Tooltip-Box, ersetzen Sie den nativen Tooltip-Box.

Für weitere Informationen über das Tooltip Mitglied finden Sie in der API - Dokumentation Tooltip Kastenelement (das Widget Tooltip) .

Die Standardfunktion

Bewegen Sie den Mauszeiger auf den Link, oder verwenden Sie die Tab-Taste auf jedem Element den Fokus, um durch. 

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Tooltip-Box (Tooltip) - Standard Funktion </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ (Dokument) .tooltip ();
  });
  </ Script>
  <Style>
  label {
    display: inline-block;
    Breite: 5em;
  }
  </ Style>
</ Head>
<Body>
 
<P> <a href="#" title="部件的名称"> Tooltips </a> es kann zu jedem Element gebunden sein. Wenn Sie über das Element bewegen, Titel Eigenschaft wird neben dem Element in einem kleinen Kästchen angezeigt werden, als native als Tooltip-Box. </ P>
<P> Da es jedoch keine native Tooltip-Box ist, so dass es Arten definiert werden können. Theme von <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> Themeroller </a> erstellt wurden, können auch entsprechend Tooltip-Box Stile definiert werden. </ P>
<P> Tooltip-Box kann auch Elemente verwendet werden, zu bilden, in jeder Region einige zusätzliche Informationen angezeigt werden soll. </ P>
<P> <label for = "Alter"> Ihr Alter: </ label> <input id = "Alter" title = ". Alter ist nur für statistische verwendet"> </ p>
<P> schweben über dem entsprechenden Bereich eine Werkzeugspitze Box anzuzeigen. </ P>
 
 
</ Body>
</ Html>

Custom Style

Bewegen Sie den Mauszeiger auf den Link, oder verwenden Sie die Tab-Taste auf jedem Element den Fokus, um durch. 

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Tooltip-Box (Tooltip) - Custom Style </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ (Dokument) .tooltip ({
      Position: {
        my: "Zentrum Grund-20",
        an: "Mitte oben",
        Verwendung: Funktion (Position, Feedback) {
          $ (Diese) CSS- (Position);
          $ ( "<Div>")
            .addClass ( "Pfeil")
            .addClass (feedback.vertical)
            .addClass (feedback.horizontal)
            .appendTo (this);
        }
      }
    });
  });
  </ Script>
  <Style>
  .ui-Tooltip, .arrow: nach {
    Hintergrund: schwarz;
    border: 2px solid weiß;
  }
  .ui-Tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", sans-serif;
    text-transform: Groß;
    box-shadow: 0 0 7px schwarz;
  }
  .arrow {
    Breite: 70px;
    Höhe: 16px;
    overflow: hidden;
    position: absolute;
    links: 50%;
    margin-left: -35px;
    unten: -16px;
  }
  .arrow.top {
    top: -16px;
    unten: auto;
  }
  .arrow.left {
    links: 20%;
  }
  .arrow: nach {
    Inhalt: "";
    position: absolute;
    links: 20px;
    top: -20px;
    Breite: 25px;
    Höhe: 25px;
    box-shadow: 6px 5px 9px -9px schwarz;
    -webkit-transform: rotate (45 Grad);
    -moz-transform: drehen (45 Grad);
    -ms-transform: drehen (45 Grad);
    -o-transform: rotate (45 Grad);
    TRANFORM: Drehen (45 Grad);
  }
  .arrow.top: nach {
    unten: -20px;
    top: auto;
  }
  </ Style>
</ Head>
<Body>
 
<P> <a href="#" title="部件的名称"> Tooltips </a> es kann zu jedem Element gebunden sein. Wenn Sie über das Element bewegen, Titel Eigenschaft wird neben dem Element in einem kleinen Kästchen angezeigt werden, als native als Tooltip-Box. </ P>
<P> Da es jedoch keine native Tooltip-Box ist, so dass es Arten definiert werden können. Theme von <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> Themeroller </a> erstellt wurden, können auch entsprechend Tooltip-Box Stile definiert werden. </ P>
<P> Tooltip-Box kann auch Elemente verwendet werden, zu bilden, in jeder Region einige zusätzliche Informationen angezeigt werden soll. </ P>
<P> <label for = "Alter"> Ihr Alter: </ label> <input id = "Alter" title = ". Alter ist nur für statistische verwendet"> </ p>
<P> schweben über dem entsprechenden Bereich eine Werkzeugspitze Box anzuzeigen. </ P>
 
 
</ Body>
</ Html>

Benutzerdefinierte Animation

Dieses Beispiel zeigt, wie die Ein- und Ausblenden Optionen verwenden, um die Animation zu gestalten, können Sie auch das Open-Ereignis verwenden, um die Animation zu gestalten. 

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Tooltip-Box (Tooltip) - Benutzerdefinierte Animation </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// 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-Option") .tooltip ({
      Show: {
        Effekt: "slidedown",
        Verzögerung: 250
      }
    });
    $ ( "# Hide-Option") .tooltip ({
      verstecken: {
        Effekt: "explodieren",
        Verzögerung: 250
      }
    });
    $ ( "# Open-Ereignis") .tooltip ({
      Show: null,
      Position: {
        my: "links oben",
        an: "links unten"
      },
      offen: function (event, ui) {
        ui.tooltip.animate ({top: ui.tooltip.position () oben + 10.}, "schnell");
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<P> Es gibt eine Reihe von Möglichkeiten, Tooltip-Box Animation anpassen. </ P>
<P> Sie können mit <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="向下滑动显示"> zeigen </a> und <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="爆炸隐藏"> </a> Option ausblenden. </ P>
<P> Sie können auch mit <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="向下移动显示"> geöffnet </a> Veranstaltung. </ P>
 
 
</ Body>
</ Html>

Custom Content

Zeigen Sie, wie Objekte und Inhalte Optionen anpassen, um verschiedene Ereignisdelegaten Tooltip-Box zu einer einzigen Instanz verbinden.

Sie müssen möglicherweise Tooltip-Box-Interaktion auf der Karte, die eine zukünftige Version der Funktion realisiert werden. 

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Tooltip-Box (Tooltip) - Custom Content </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// 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-header {
    margin: 1em 0;
  }
  .map {
    Breite: 350px;
    Höhe: 350px;
  }
  .ui-Tooltip {
    max-width: 350px;
  }
  </ Style>
  <Script>
  $ (Function () {
    $ (Dokument) .tooltip ({
      Artikel: "img, [data-geo], [title]",
      Inhalt: function () {
        var element = $ (this);
        if (element.is ( "[data-Geo]")) {
          var text = element.text ();
          return "<img class = 'Karte' alt = '" + Text +
            " 'Src =' http: //maps.google.com/maps/api/staticmap?" +
            "Zoom = 11 & size = 350x350 & maptype = Terrain & Sensor = false & center =" +
            Text + ">";
        }
        if (element.is ( "[title]")) {
          Rückkehr element.attr ( "title");
        }
        if (element.is ( "img")) {
          Rückkehr element.attr ( "alt");
        }
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "ui-Widget photo">
  <Div class = "ui-Widget-Header ui-Ecke-all">
    <H2> Stephansdom (Stephansdom) </ h2>
    <H3> <a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" data-geo=""> Wien, Österreich (Wien, Österreich) </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 = "Stephansdom (Stephansdom & apos; s Cathedral)" class = "ui-Ecke-all">
  </a>
</ Div>
 
<Div class = "ui-Widget photo">
  <Div class = "ui-Widget-Header ui-Ecke-all">
    <H2> Tower Bridge (Tower Bridge) </ h2>
    <H3> <a href="http://maps.google.com/maps?q=london,+england&amp;z=11" data-geo=""> London (London, England) </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 / Turm-bridge.jpg" alt = "Tower Bridge (Tower Bridge)" class = "ui-Ecke-all">
  </a>
</ Div>
 
<P> Alle Bilder von <a href="http://commons.wikimedia.org/wiki/Main_Page"> Wikimedia Commons </a> und werden von <a href = "Besitz http://creativecommons.org/ Lizenzen / by-sa / 3.0 / deed.en "title =" Creative Commons Attribution-ShareAlike 3.0 "> CC BY-SA 3.0 </a> unter Copyright-Inhaber. </ P>
 
 
</ Body>
</ Html>

Form

Verwenden Sie den Button, um den Hilfetext anzuzeigen, oder lassen Sie einfach Ihre Maus schweben über dem Eingabefeld oder haben Sie das Eingabefeld den Fokus hat, können Sie Hilfetext entsprechende Eingabefeld angezeigt werden soll.

Definieren Sie eine feste Breite in CSS, so dass gleichzeitig zeigt alle Hilfetext konsequenter aussieht. 

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Tooltip-Box (Tooltip) - Formulare </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// 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;
  }
  fieldset .help {
    display: inline-block;
  }
  .ui-Tooltip {
    Breite: 210px;
  }
  </ Style>
  <Script>
  $ (Function () {
    var Tooltips = $ ( "[title]") .tooltip ();
    $ ( "<Button>")
      .text ( "Hilfe")
      .Taste ()
      .click (function () {
        tooltips.tooltip ( "open");
      })
      .insertAfter ( "Form");
  });
  </ Script>
</ Head>
<Body>
 
<Form>
  <Fieldset>
    <Div>
      <Label for = "Vorname"> name </ label>
      <Input id = "Vorname" name = "Vorname" title = "Bitte geben Sie Ihren Vornamen ein.">
    </ Div>
    <Div>
      <Label for = "Nachname"> Nachname </ label>
      <Input id = "Nachname" name = "Nachname" title = "Bitte Ihren Nachnamen liefern.">
    </ Div>
    <Div>
      <Label for = "Adresse"> Adresse </ label>
      <Input id = "Adresse" name = "Adresse" title = "Ihre private oder geschäftliche Adresse.">
    </ Div>
  </ Fieldset>
</ Form>
 
 
</ Body>
</ Html>

Tracking-Maus

In diesem Fall Tooltip Feld wird an die Maus relativ positioniert ist, wenn die Maus über dem Element, wird die Mausbewegung folgen. 

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Tooltip-Box (Tooltip) - Tracking-Maus </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// 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;
    Breite: 5em;
  }
  </ Style>
  <Script>
  $ (Function () {
    $ (Dokument) .tooltip ({
      Spur: true
    });
  });
  </ Script>
</ Head>
<Body>

<P> <a href="#" title="部件的名称"> Tooltips </a> es kann zu jedem Element gebunden sein. Wenn Sie über das Element bewegen, Titel Eigenschaft wird neben dem Element in einem kleinen Kästchen angezeigt werden, als native als Tooltip-Box. </ P>
<P> Da es jedoch keine native Tooltip-Box ist, so dass es Arten definiert werden können. Theme von <a href="http://themeroller.com" title="ThemeRoller:jQuery UI 的主题创建应用程序"> Themeroller </a> erstellt wurden, können auch entsprechend Tooltip-Box Stile definiert werden. </ P>
<P> Tooltip-Box kann auch Elemente verwendet werden, zu bilden, in jeder Region einige zusätzliche Informationen angezeigt werden soll. </ P>
<P> <label for = "Alter"> Ihr Alter: </ label> <input id = "Alter" title = ". Alter ist nur für statistische verwendet"> </ p>
<P> schweben über dem entsprechenden Bereich eine Werkzeugspitze Box anzuzeigen. </ P>
 
 
</ Body>
</ Html>

Video Player

Eine virtuelle Video-Player mit wie / share / Statistik-Taste, jede Taste mit benutzerdefinierten Stile Tooltip-Box. 

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> jQuery UI Tooltip-Box (Tooltip) - Video Player </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  .Player {
    Breite: 500px;
    Höhe: 300px;
    border: 2px Nut grau;
    Hintergrund: rgb (200, 200, 200);
    text-align: center;
    line-height: 300px;
  }
  .ui-Tooltip {
    border: 1px solid white;
    Hintergrund: 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 () {
    Funktion benachrichtigen (Eingang) {
      var msg = "Ausgewählte" + $ .trim (input.data ( "Tooltip-Titel") || input.text ());
      $ ( "<Div>")
        .appendTo (document.body)
        .text (msg)
        .addClass ( "notification ui-State-default ui-Ecke-bottom")
        .position ({
          my: "Mitte oben",
          an: "Mitte oben",
          von: Fenster
        })
        .show ({
          Effekt: "blind"
        })
        .delay (1000)
        .Hide ({
          Effekt: "blind",
          Dauer: "slow"
        }, Function () {
          $ (Diese) .remove ();
        });
    }
 
    $ ( "Button") .each (function () {
      var Taste = $ (this) .Taste ({
        Symbole: {
          Primär: $ (this) .data ( "Symbol")
        },
        Text: !! $ (this) .attr ( "title")
      });
      button.click (function () {
        (Button) anzuzeigen;
      });
    });
    $ ( ".set") .buttonset ({
      Artikel: "button"
    });
 
    $ (Dokument) .tooltip ({
      Position: {
        my: "Mitte oben",
        an: "Mitte unten + 5",
      },
      Show: {
        Dauer: "schnell"
      },
      verstecken: {
        Effekt: "verstecken"
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "Spieler"> Hier ist das Video (HTML5?) </ Div>
<Div class = "Werkzeuge">
  <Span class = "set">
    <Schaltfläche, um Daten-Symbol = "ui-icon-Kreis-Pfeil-n" title = "Ich mag dieses Video"> wie </ button>
    <Schaltfläche, um Daten-Symbol = "ui-icon-Kreis-Pfeil-s"> Ich dieses Video nicht wie </ button>
  </ Span>
  <Div class = "set">
    <Schaltfläche, um Daten-Symbol = "ui-icon-Kreis-plus" title = "Zur Playlist hinzufügen"> In den </ button>
    <Taste class = "Menü" Daten-Symbol = "ui-icon-Dreieck-1-s"> Zu Favoriten hinzufügen </ button>
  </ Div>
  <Taste title = "Dieses Video teilen"> Teilen </ button>
  <Schaltfläche, um Daten-Symbol = "ui-icon-Alarm"> melden </ button> markiert
</ Div>
 
 
</ Body>
</ Html>