Neueste Web-Entwicklung Tutorials
 

Bootstrap JS Tooltip

❮ Zurück Weiter Referenz ❯

JS Tooltip (tooltip.js)

Der Tooltip Plugin ist kleines Pop-up-Fenster, das erscheint, wenn der Benutzer den Mauszeiger über ein Element bewegt.

Ein Tutorial über Tooltips, unsere lesen Bootstrap Tooltip Tutorial .

Via data-* Attribute

Die data-toggle="tooltip" aktiviert den Tooltip.

Der title - Attribut gibt den Text an , der innerhalb des Tooltip angezeigt werden sollen.

Beispiel

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Versuch es selber "

Via JavaScript

Tooltips sind nicht CSS-only - Plugins und müssen daher mit jQuery initialisiert werden: das angegebene Element wählen und den Anruf tooltip() Methode.

Beispiel

// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();

// Select a specified element
$('#myTooltip').tooltip();
Versuch es selber "

Tooltip-Optionen

Die Optionen können über Datenattribute oder JavaScript übergeben werden. Die Option Namen für Datenattribute, hängen Sie data- , wie in data-placement="" .

Name Art Standard Beschreibung Versuch es
animationbooleantrue

Gibt an, ob eine CSS-Fade Übergangseffekt hinzufügen, wenn zeigen und den Tooltip versteckt

  • true - Fügen Sie eine Fading - Effekt
  • false - Sie einen Fading - Effekt nicht hinzufügen
Versuch es
Container String oder die boolean false falsch Hängt den Tooltip zu einem bestimmten Element.
Beispiel: Behälter: 'body' 		Versuch es
delaynumber, or object0 Gibt die Anzahl der Millisekunden dauert, um es den Tooltip ein- und ausblenden.

So geben Sie eine Verzögerung für die Ansicht und eine weitere für das Verstecken, verwenden Sie die Objektstruktur:

delay: {show: 500, hide: 100} - die 500 ms dauern wird , die zeigen , tooltip , aber nur 100 ms , es zu verbergen 		Versuch es
htmlboolean false Gibt an, ob HTML-Tags im Tooltip zu akzeptieren:
  • true - HTML - Tags übernehmen
  • false - Sie HTML - Tags nicht akzeptieren
Hinweis: Die HTML muss im Titel - Attribut eingefügt werden (oder den Titel - Option).

Wenn auf false gesetzt (Standard), jQuery's text() Methode verwendet wird. Verwenden Sie diese Option, wenn Sie über XSS-Angriffe sind besorgt 		Versuch es
placementstring"top" Gibt den Tooltip Position. Mögliche Werte:

  • "top" - Tooltip oben
  • "bottom" - Tooltip auf der Unterseite
  • "left" - Tooltip auf der linken Seite
  • "right" - Tooltip auf der rechten Seite
  • "auto" - Ermöglicht es dem Browser , um die Position des Tooltips entscheiden. Zum Beispiel, wenn der Wert "auto left" , wird der Tooltip auf der linken Seite angezeigt werden, wenn möglich, sonst auf der rechten Seite . Wenn der Wert "auto bottom" , wird der Tooltip am unteren Rand angezeigt werden, wenn möglich, sonst auf der Oberseite
Versuch es
selectorstring, or the boolean falsefalse Fügt den Tooltip zu einem festgelegten Selektor Versuch es
templatestring  Base-HTML zu verwenden, wenn der Tooltip zu schaffen.

Der Titel der Tooltip wird in das Element eingeführt werden, die die Klasse .tooltip-inner und das Element mit der Klasse .tooltip-arrow wird die Quick - Info des Pfeils werden.

Die äußerste Hüllenelement sollte die haben .tooltip Klasse.
titlestring"" Gibt den Text an, der innerhalb des Tooltip angezeigt werden soll Versuch es
triggerstring"hover focus" Gibt an, wie der Tooltip ausgelöst wird. Mögliche Werte:

  • "click" - Lösen Sie den Tooltip mit einem Klick
  • "hover" - Lösen Sie den Tooltip auf schweben
  • "focus" - den Tooltip auslösen , wenn es den Fokus erhält (durch Tabbing oder klicken .eg)
  • "manual" - Lösen Sie den Tooltip manuell
Tipp: Um mehrere Werte, trennen Sie diese mit einem Raum passieren 		Versuch es
viewportstring, or object{selector: "body", padding: 0} Hält den Tooltip innerhalb der Grenzen dieses Elements.

Beispiel: viewport: '#viewport' oder {selector: '#viewport', padding: 0}

Tooltip Methoden

Die folgende Tabelle listet alle verfügbaren Tooltip Methoden.

Methode Beschreibung Versuch es
.tooltip( options ) Aktiviert den Tooltip mit einer Option. Siehe oben stehenden Optionen für gültige Werte Versuch es
.tooltip("show") Zeigt den Tooltip Versuch es
.tooltip("hide") Blendet die Tooltip Versuch es
.tooltip("toggle") Schaltet den Tooltip Versuch es
.tooltip("destroy") Versteckt und zerstört den Tooltip Versuch es

Tooltip Veranstaltungen

Die folgende Tabelle listet alle verfügbaren Tooltip Ereignisse.

Event Beschreibung Versuch es
show.bs.tooltip Tritt ein, wenn der Tooltip über angezeigt werden soll Versuch es
shown.bs.tooltip Tritt ein, wenn der Tooltip vollständig angezeigt wird (nach dem CSS-Übergänge abgeschlossen haben) Versuch es
hide.bs.tooltip Tritt ein, wenn die ToolTip ausgeblendet werden Versuch es
hidden.bs.tooltip Tritt ein, wenn der Tooltip vollständig verborgen ist (nachdem CSS-Übergänge abgeschlossen haben) Versuch es
Beispiele

Beispiele

Benutzerdefinierte Tooltip Entwurf

Verwenden Sie CSS das Aussehen des Tooltips anzupassen:

Beispiel

/* Tooltip */
.test + .tooltip > .tooltip-inner {
    background-color: #73AD21;
    color: #FFFFFF;
    border: 1px solid green;
    padding: 15px;
    font-size: 20px;
}

/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
    border-top: 5px solid green;
}

/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
    border-bottom: 5px solid blue;
}

/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
    border-left: 5px solid red;
}

/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
    border-right: 5px solid black;
}
Versuch es selber "

❮ Zurück Weiter Referenz ❯