English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap Grundlagen-Tutorial

Bootstrap Plugins

Bootstrap Tooltip (Tooltip) Plugin

wenn Sie eine Verknüpfung beschreiben möchten, ist der Tooltip (Tooltip) sehr nützlich. Das Tooltip-Plugin (Tooltip) ist inspiriert von Jason Frame geschrieben von jQuery.tipsy inspiriert. Das Tooltip-Plugin (Tooltip) hat viele Verbesserungen erfahren, z.B. ist es nicht mehr auf Bilder angewiesen, sondern nutzt CSS zur Erstellung von Animationseffekten und speichert die Titelinformationen in den data-Attributen.

wenn Sie die Funktionen des Plugins einzeln verwenden möchten, müssen Sie tooltip.jserwähnt. Oder wie Bootstrap-Plugin-Übersicht wie im Kapitel bootstrap.js oder die komprimierte Version bootstrap.min.js.

Verwendung

Das Tooltip-Plugin (Tooltip) erzeugt auf Anfrage Inhalte und Markierungen und platziert die Tooltipps (tooltips) standardmäßig hinter ihren Auslöselementen. Sie können die Tooltipps (tooltips) auf zwei Arten hinzufügen:

  • durch data-Attribut：Um ein Tooltip hinzuzufügen, fügen Sie einfach data-toggle="tooltip" 。Der title des Ankers ist der Text des Tooltipps. Standardmäßig platziert das Plugin den Tooltip oben.

  • durch JavaScript：Tooltip durch JavaScript auslösen:

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

Das Tooltip-Plugin ist anders als die zuvor besprochenen Dropdown-Listen und anderen Plugins nicht ein reines CSS-Plugin. Um das Plugin zu verwenden, müssen Sie es mit jQuery aktivieren (javascript lesen). Verwenden Sie den folgenden Skript, um alle Tooltipps auf der Seite zu aktivieren:

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

Online-Beispiel

Nachfolgender Beispiel zeigt die Verwendung des Tooltip-Plugins über das data-Attribut.

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　Tooltip-Plugin/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Tooltip-Plugin (Tooltip)　-　Anker</h4>
Dies ist ein <a href="#" class="tooltip-test" data-toggle="tooltip" title="standard Tooltip">standard Tooltip/a>.
Dies ist ein <a href="#" class="tooltip-test" data-toggle="tooltip"　data-placement="left" title="linker Tooltip">linker Tooltip/a>.
Dies ist ein <a href="#" data-toggle="tooltip"　data-placement="top" title="oberer Tooltip">oberer Tooltip/a>.
Dies ist ein <a href="#" data-toggle="tooltip"　data-placement="bottom" title="unterer Tooltip">unterer Tooltip/a>.
Dies ist ein <a href="#" data-toggle="tooltip"　data-placement="right" title="rechter Tooltip">rechter Tooltip</a>
<br>
<h4>Tooltip-Plugin (Tooltip)　-　Schaltfläche</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="standard Tooltip">standard Tooltip</button>}}
<button type="button" class="btn btn-default" data-toggle="tooltip"　data-placement="left" title="linker Tooltip">linker Tooltip
</button>}}
<button type="button" class="btn btn-default" data-toggle="tooltip"　data-placement="top" title="oberer Tooltip">oberer Tooltip
</button>}}
<button type="button" class="btn btn-default" data-toggle="tooltip"　data-placement="bottom" title="unterer Tooltip">unterer Tooltip
</button>}}
<button type="button" class="btn btn-default" data-toggle="tooltip"　data-placement="right" title="rechter Tooltip">rechter Tooltip</button>}}
<script>
	$(function　()　{　$("[data-toggle='tooltip']").tooltip();　});
</script>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

Optionen

Einige Optionen werden durch den Bootstrap-Daten-API (Bootstrap Data API) hinzugefügt oder durch JavaScript aufgerufen. Nachstehend ist eine Tabelle mit diesen Optionen aufgeführt:

OptionnameTyp/StandardwertDatenattributnameBeschreibung
animationboolean
Standardwert: true		data-animationDas Tooltips verwendet CSS-Verzögerungsfilters.
htmlboolean
Standardwert: false		data-htmlFügen Sie HTML in das Tooltips ein. Wenn false, wird der jQuery text-Method verwendet, um Inhalte in das DOM einzufügen. Wenn Sie XSS-Angriffe befürchten, verwenden Sie text.
placementstring|function
Standardwert: top		data-placementDefinieren Sie, wie das Tooltips positioniert wird (d.h. top|bottom|left|right|auto).
Wenn auf auto wird dynamisch angepasst. Zum Beispiel, wenn placement "auto left" ist, wird das Tooltips so weit wie möglich auf der linken Seite angezeigt und wird nur auf der rechten Seite angezeigt, wenn es nicht möglich ist.
selectorstring
Standardwert: false		data-selectorWenn ein Selektor bereitgestellt wird, wird das Tooltips-Objekt an das angegebene Ziel delegiert.
titlestring | function
Standardwert: ''		data-titleWenn nicht angegeben title Wenn die Eigenschaft nicht angegeben ist, ist der title-Option der Standardwert title.
triggerstring
Standardwert: 'hover focus'		data-triggerDefinieren Sie, wie das Tooltips ausgelöst wird: click| hover | focus | manual。Sie können mehrere Trigger über Leerzeichen getrennt übergeben.
delaynumber | object
Standardwert: 0		data-delayMillisekunden für die Anzeige und das Ausblenden der Tooltips-Verzögerung - Nicht anwendbar für den manuellen Trigger-Typ. Wenn eine Zahl bereitgestellt wird, wird die Verzögerung auf Anzeigen und Ausblenden angewendet. Wenn ein Objekt bereitgestellt wird, hat die Struktur wie folgt:
delay:
{　show:　500,　hide:　100　}
containerstring | false
Standardwert: false		data-containerFügen Sie einem bestimmten Element ein Tooltips hinzu.
Beispiel: container: 'body'

Methode

Hier sind einige nützliche Methoden für das Tooltips-Plugin (Tooltip):

MethodeBeschreibungBeispiel
Optionen: .tooltip(options)Fügen Sie eine Tooltips-Handhabung zu der Elementmenge hinzu.
$().tooltip(options)
Toggle: .tooltip('toggle')切换显示/隐藏元素的提示工具。
$('#element').tooltip('toggle')
Show: .tooltip('show')显示元素的提示工具。
$('#element').tooltip('show')
Hide: .tooltip('hide')隐藏元素的提示工具。
$('#element').tooltip('hide')
Destroy: .tooltip('destroy')隐藏并销毁元素的提示工具。
$('#element').tooltip('destroy')

Online-Beispiel

下面的示例演示了提示工具(Tooltip)插件方法的用法。

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　工具提示(Tooltip)插件方法
	这是一个　
	Tooltip　方法　showTooltip　方法　hideTooltip　方法　destroyTooltip　方法　toggle





	
		这是一个　
		'am　Header2　</h2>">Tooltip　方法　options
	<script>
		$(function　()　{　$('.tooltip-show').tooltip('show');});
		$(function　()　{　$('.tooltip-hide').tooltip('hide');});
		$(function　()　{　$('.tooltip-destroy').tooltip('destroy');});
		$(function　()　{　$('.tooltip-destroy
		$(function () { $(".tooltip toggle").tooltip('toggle');});-$("#options a").tooltip({html: true});});
	</script>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

Ereignis

Die folgende Tabelle listet die Ereignisse auf, die im Tooltip-Plugin verwendet werden. Diese Ereignisse können als Hooks in Funktionen verwendet werden.

EreignisBeschreibungBeispiel
show.bs.tooltipDieses Ereignis wird sofort ausgelöst, wenn die show-Methode aufgerufen wird.
$('#myTooltip').on('show.bs.tooltip', function () {
　　//　Führen Sie einige Aktionen aus...
}
shown.bs.tooltipDieses Ereignis wird ausgelöst, wenn der Tooltip dem Benutzer sichtbar wird (warten auf Abschluss der CSS-Übergangseffekte).
$('#myTooltip').on('shown.bs.tooltip', function () {
　　//　Führen Sie einige Aktionen aus...
}
hide.bs.tooltipDieses Ereignis wird sofort ausgelöst, wenn die hide-Methode aufgerufen wird.
$('#myTooltip').on('hide.bs.tooltip', function () {
　　//　Führen Sie einige Aktionen aus...
}
hidden.bs.tooltipDieses Ereignis wird ausgelöst, wenn der Tooltip dem Benutzer versteckt wird (warten auf Abschluss der CSS-Übergangseffekte).
$('#myTooltip').on('hidden.bs.tooltip', function () {
　　//　Führen Sie einige Aktionen aus...
}

Online-Beispiel

Der folgende Beispiel zeigt die Verwendung der Ereignisse des Tooltip-Plugins (Tooltip).

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　<Tooltip-Plugin (Tooltip) Ereignisse>/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Tooltip-Plugin (Tooltip)　-　Anker</h4>
Dies ist ein <a href="#" class="tooltip-show" data-toggle="tooltip"　
	title="Standard Tooltip" Standard Tooltip
</a>.
<script>
$(function　()　{　$('.tooltip-show').tooltip('show');});
$(function　()　{　$('.tooltip-$('function () { $('.tooltip
	alert("Alert message on show");
})});
</script>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

Bootstrap-Popup-PluginBootstrap-Tab-Plugin