Heim > Web-Frontend > js-Tutorial > Bootstrap-Tooltip-Plug-in, das Sie jeden Tag erlernen müssen_Javascript-Kenntnisse

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

WBOY
Freigeben: 2016-05-16 15:03:55
Original
2213 Leute haben es durchsucht

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>
Nach dem Login kopieren

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

$('#identifier').tooltip(options)
Nach dem Login kopieren

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(); });
Nach dem Login kopieren

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();

Nach dem Login kopieren

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>


Nach dem Login kopieren

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'
}); 


Nach dem Login kopieren

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');


Nach dem Login kopieren

In Tooltip gibt es vier Arten von Ereignissen.

//Veranstaltung, andere ähnliche

$('#select a').on('show.bs.tooltip', function() {
 alert('调用 show 时触发!');
}); 
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage