Tooltips sind sehr nützlich, wenn Sie einen Link beschreiben möchten. Das Tooltip -Plugin ist von Jquery.Tipsy inspiriert, geschrieben von Jason Frame. Das Tooltip-Plug-In hat viele Verbesserungen vorgenommen, z. B. nicht auf Bilder, sondern auch CSS verwendet, um Animationseffekte zu erzielen und Datenattribute zum Speichern von Titelinformationen zu verwenden.
Wenn Sie die Funktionalität des Plugins separat verweisen möchten, müssen Sie Tooltip.js referenzieren. Oder, wie im Kapitel "Bootstrap Plugin" erwähnt, können Sie unter Bootstrap.js oder komprimierten Versionen von Bootstrap.min.js verweisen.
1. Nutzung
Tooltip-Plug-Ins generieren Inhalte und Tags basierend auf den Anforderungen. Standardmäßig werden Tooltips hinter ihren Triggerelementen platziert. Es gibt zwei Möglichkeiten, wie Sie Tooltips hinzufügen können:
1. Über das Datenattribut: Wenn Sie einen Tooltip hinzufügen müssen, fügen Sie einfach Data-Toggle = "Tooltip" zu einem Anker-Tag hinzu. Der Titel des Ankers ist der Text des Tooltip. Standardmäßig legt das Plugin den Tooltip oben fest.
<a href = "#" data-toggle = "tooltip"> Bitte schweben Sie über mich </a>
2. Über JavaScript: Trigger Tooltip (Tooltip) über JavaScript:
$ ('#identifier'). Tooltip (Optionen)Das Tooltip-Plugin ist nicht wie die zuvor diskutierten Dropdown-Menüs und andere Plug-Ins, sondern kein reines CSS-Plug-In. Um das Plugin zu verwenden, müssen Sie es mit JQuery aktivieren (lesen Sie JavaScript). Verwenden Sie das folgende Skript, um alle Tooltips in der Seite zu aktivieren:
$ (function () {$ ("[data-toggle = 'tooltip']"). tooltip ();});2. Optionen
Es gibt einige Optionen, die über die Bootstrap -Daten -API (Bootstrap -Daten -API) hinzugefügt oder über JavaScript aufgerufen werden. In der folgenden Tabelle werden folgende Optionen aufgeführt:
drei. Tooltips
// Basic-Beispiel <a href = "#" data-toggle = "tooltip"> html5 </a> // Das JS-Teil muss $ ('#Section') deklarieren.Tooltips verfügt über viele Eigenschaften, um die Anzeige von Eingabeaufforderungen zu konfigurieren, wie folgt:
<a href = "#" rel = "tooltip" data-toggle = "Tooltip" data-Animation = "False" data-html = "true" data-placement = "auto" data-selector = "a [rel = tOoltIp]" data-trigger = "data-Delay =" 500 </b> 123 </b> ">
Entfernen Sie einfach die vorherigen Daten in JavaScript. Einschließlich: Animation, HTML, Platzierung, Selektor, Originaltitel, Titel, Trigger, Verzögerung, Container und Vorlage sowie andere Eigenschaften.
// JavaScript -Methode $ ('#Abschnitt A'). Tooltip ({Delay: {show: 500, ausblenden: 100,}, Container: 'Body'});Es gibt vier Methoden für JavaScript: zeigen, verstecken, umschalten und zerstören.
// $ ('#Abschnitt A'). TOoltip ('show'); // $ ('#Abschnitt A'). Tooltip ('ausblenden'); // Invert Show und $ $ ('#tection a'). TOoltip ('Toggle'); // $ und zerstören $ ('#Abschnitt A'). Tooltip ('Distrey');Es gibt vier Arten von Ereignissen im Tooltip.
// Ereignisse, andere Ähnlichkeiten
$ ('#select a'). on ('show.bs.tooltip', function () {alert ('kostenlos, wenn die Show genannt wird!');});Diese Reihe von Tutorials wurde zusammengestellt in: Bootstrap -Tutorials für besondere Themen, Willkommen, um zu lernen.
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.