Bootstrap-Tooltip-Plug-in, das Sie jeden Tag erlernen müssen_Javascript-Kenntnisse

Tooltips sind sehr nützlich, wenn Sie einen Link beschreiben möchten. Das Tooltip-Plugin wurde von jQuery.tipsy von Jason Frame inspiriert. Das Tooltip-Plugin hat viele Verbesserungen vorgenommen. Es muss sich beispielsweise nicht auf Bilder verlassen, sondern verwendet stattdessen CSS, um Animationseffekte zu erzielen, und verwendet das Datenattribut zum Speichern von Titelinformationen.

Wenn Sie die Funktionalität dieses Plugins separat referenzieren möchten, müssen Sie auf tooltip.js verweisen. Alternativ können Sie, wie im Kapitel Übersicht über das Bootstrap-Plugin erwähnt, auf bootstrap.js oder eine minimierte Version von bootstrap.min.js verweisen.
1. Verwendung
Tooltip-Plugins generieren Inhalte und Markups bei Bedarf. Standardmäßig werden Tooltips nach ihren auslösenden Elementen platziert. Sie können Tooltips auf zwei Arten hinzufügen:

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 Tooltips. Standardmäßig setzt das Plugin den Tooltip oben.

<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

2. Über JavaScript: Tooltip über JavaScript auslösen:

$('#identifier').tooltip(options)

Das Tooltip-Plugin ist kein reines CSS-Plugin wie die zuvor besprochenen Dropdown-Menüs und anderen Plugins. Um das Plugin nutzen zu können, müssen Sie es mit jquery (Javascript lesen) aktivieren. Verwenden Sie das folgende Skript, um alle Tooltips auf der Seite zu aktivieren:

$(function () { $("[data-toggle='tooltip']").tooltip(); });

2. Optionen
Einige Optionen werden über die Bootstrap Data API hinzugefügt oder über JavaScript aufgerufen. Die Optionen sind in der folgenden Tabelle aufgeführt:

3. Tooltip

//基本实例

<a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>
//JS 部分需要声明

$('#section').tooltip();

Tooltips verfügen über viele Eigenschaften, um die Anzeige von Tipps wie folgt zu konfigurieren:

<a href="#" rel="tooltip" data-toggle="tooltip" title="超文本标识符"
 data-animation="false"
 data-html="true"
 data-placement="auto"
 data-selector="a[rel=tooltip]"
 data-trigger="click"
 data-delay="500"
 data-template="<b>123</b>"
>HTML5</a>

Die JavaScript-Methode kann die vorherigen Daten direkt entfernen. Einschließlich: Animation, HTML, Platzierung, Selektor, Originaltitel, Titel, Auslöser, Verzögerung, Container und Vorlagenattribute.

//JavaScript 方式

$('#section a').tooltip({
 delay : {
  show : 500,
  hide : 100,
 },
 container : 'body'
}); 

JavaScript verfügt über vier Methoden: Anzeigen, Ausblenden, Umschalten und Zerstören.

//显示
$('#section a').tooltip('show');
//隐藏
$('#section a').tooltip('hide');
//反转显示和隐藏
$('#section a').tooltip('toggle');
//隐藏并销毁
$('#section a').tooltip('destroy');

In Tooltip gibt es vier Arten von Ereignissen.

//Veranstaltung, andere ähnliche

$('#select a').on('show.bs.tooltip', function() {
 alert('调用 show 时触发！');
}); 

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.