Latest web development tutorials

jQuery UI API - Tooltip Kasten (Tooltip Widget)

Kategorie

Widgets (Widgets)

Verwendung

Beschreibung: anpassbaren, Themable Tooltip - Box, ersetzen Sie den nativen Tooltip - Box.

Neue Version: 1.9

Tooltip-Box (Tooltip) ersetzt die native Tooltip-Box, so dass sie Thematisierung können, erlaubt auch verschiedene Anpassungen:

  • Zeigen Sie nicht nur den Titel des anderen Inhalten, wie Fußnoten oder Inline von Ajax zusätzliche Inhalte abgerufen werden.
  • Kundenspezifische Targeting, beispielsweise zentriert auf dem Element Tooltip Feld.
  • Fügen Sie zusätzliche Stile das Aussehen einer Warnung oder Fehlerbereich anpassen.

Eine Standard-Gradient-Animation zu zeigen und verstecken Tooltip Feld verglichen mit dem einfachen, die Sichtbarkeit einer solchen Erscheinung geistiger wechseln. Dies kann show und hide Anpassungsoptionen.

items und content Optionen müssen Schritt halten. Wenn Sie ein zu ändern, müssen Sie die anderen zu ändern.

In der Regel wird deaktiviert Elemente keine DOM-Ereignisse nicht auslösen. Daher wird ein geeignetes Werkzeug, um den Ballon deaktiviert Element zur Steuerung ist nicht möglich, da wir auf Ereignisse zu hören müssen, wenn zu bestimmen Tooltip Feld anzuzeigen und zu verstecken. Dies führt zu jQuery UI kann keine Unterstützung für Behinderte Element auf die Werkzeugspitze Box auf jeder Ebene angebracht garantieren. Dies bedeutet, dass, wenn Sie für die deaktivierten Elemente aufgefordert werden müssen, können Sie eine Mischung aus einheimischen und jQuery UI Ballon Tooltip-Box verwenden müssen kann.

Theming

Tooltip Kastenelement (Tooltip Widget) mit jQuery UI - CSS - Framework das Look and Feel von seinen Stil zu definieren. Wenn Sie die angegebene Tooltip Stil Box verwenden müssen, können Sie die folgenden CSS-Klassennamen verwenden:

  • ui-tooltip - ui-tooltip : Außenbehälter Tooltip - Box.
    • ui-tooltip-content - ui-tooltip-content : Tooltip - Box Inhalt.

Verlassen Sie sich

Weitere Informationen

  • Der Teil erfordert eine gewisse funktionale CSS, sonst wird es nicht funktionieren. Wenn Sie ein eigenes Thema zu erstellen, verwenden Sie das Widget angegebenen CSS-Datei als Ausgangspunkt.

Beispiele

Verwenden Sie alle Elemente mit dem Titel-Attribut des Event-Makler, eine Werkzeugspitze Box (Tooltip) auf dem Dokument zu erstellen. 

<! DOCTYPE html>
<Html lang = "de">
<Head>
  <Meta charset = "UTF-8">
  <Titel> Tooltip Kasten (Tooltip Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Body>
 
<P>
  <a href="#" title="锚描述"> Ankertext </a>
  <Input title = "Eingabehilfe">
</ P>
<Script>
  $ (Dokument) .tooltip ();
</ Script>
 
</ Body>
</ Html>