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

Bootstrap 基础教程

Bootstrap 插件

Bootstrap 提示工具（Tooltip）插件

当您想要描述一个链接的时候，提示工具(Tooltip)就显得非常有用。提示工具(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具(Tooltip)插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。

如果您想要单独引用该插件的功能，那么您需要引用 tooltip.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

提示工具(Tooltip)插件根据需求生成内容和标记，默认情况下是把提示工具(tooltip)放在它们的触发元素后面。您可以有以下两种方式添加提示工具(tooltip)：

  • 通过 data 属性：如需添加一个提示工具(tooltip)，只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具(tooltip)的文本。默认情况下，插件把提示工具(tooltip)设置在顶部。

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

  • 通过 JavaScript：通过 JavaScript 触发提示工具(tooltip)：

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

Il plugin di suggerimento (Tooltip) non è un plugin puramente CSS come i menu a discesa e altri plugin discussi in precedenza. Per utilizzare questo plugin, è necessario attivarlo con jQuery (leggere JavaScript). Utilizzare lo script seguente per abilitare tutti i suggerimenti (tooltip) nella pagina:

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

Esempio online

Esempio: i suggerimenti (Tooltip) non sono plugin puri CSS come i menu a discesa e altri plugin discussi in precedenza. Per utilizzare questo plugin, è necessario attivarlo con jQuery (leggere JavaScript). Utilizzare lo script seguente per abilitare tutti i suggerimenti (tooltip) nella pagina:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Plugin di suggerimento (Tooltip)</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>Plugin di suggerimento (Tooltip) - Anello</h4>
Questo è un <a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip predefinito">Tooltip predefinito</a>.
Questo è un <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="Tooltip a sinistra">Tooltip a sinistra</a>.
Questo è un <a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip superiore">Tooltip superiore</a>.
Questo è un <a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip inferiore">Tooltip inferiore</a>.
Questo è un <a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip a destra">Tooltip a destra</a>
<br>
<h4>Plugin di suggerimento (Tooltip) - pulsante</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Tooltip predefinito">Tooltip predefinito</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip a sinistra">Tooltip a sinistra
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip in alto">Tooltip in alto</button>
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip in basso">Tooltip in basso
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip a destra">Tooltip a destra</button>
<script>
	$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
</body>
</html>
Prova a vedere ‹/›

I risultati sono come segue:

opzioni

alcune opzioni sono state aggiunte tramite l'API dei dati di Bootstrap (Bootstrap Data API) o chiamate tramite JavaScript. La tabella seguente elenca queste opzioni:

Nome delle opzioniTipo/valore predefinitoNome dell'attributo datiDescrizione
animationboolean
valore predefinito: true		data-animationlo strumento di suggerimento utilizza l'effetto di filtro della transizione CSS.
htmlboolean
Valore predefinito: false		data-htmlinserire HTML nello strumento di suggerimento. Se impostato su false, verrà utilizzato il metodo text di jQuery per inserire contenuti nel DOM. Se preoccupato per gli attacchi XSS, utilizzare text.
placementstring|function
valore predefinito: top		data-placementspecificare come posizionare lo strumento di suggerimento (cioè top|bottom|left|right|auto).
quando specificato auto quando specificato, adatterà dinamicamente lo strumento di suggerimento. Ad esempio, se placement è "auto left", lo strumento di suggerimento verrà visualizzato il più possibile a sinistra, e solo se non è possibile, verrà visualizzato a destra.
selectorstring
Valore predefinito: false		data-selectorSe fornito un selettore, l'oggetto Tooltip viene delegato al target specificato.
titlestring | function
Valore predefinito: ''		data-titleSe non specificato title Se non è specificato l'attributo, l'opzione title è il valore predefinito di title.
triggerstring
Valore predefinito: 'hover focus'		data-triggerDefinisce come attivare il Tooltip: click| hover | focus | manual. Puoi passare più trigger, separati da spazi.
delaynumber | object
Valore predefinito: 0		data-delayMillisecondi di ritardo per la visualizzazione e la nascita del Tooltip - non applicabile al tipo di attivazione manuale. Se fornito come numero, il ritardo verrà applicato sia alla visualizzazione che alla nascita. Se fornito come oggetto, la struttura è la seguente:
delay:
{ show: 500, hide: 100 }
containerstring | false
Valore predefinito: false		data-containerAggiunge un Tooltip all'elemento specificato.
Esempio: container: 'body'

Metodi

Di seguito sono riportati alcuni metodi utili del plugin Tooltip:

MetodiDescrizioneEsempio
Options: .tooltip(options)Aggiunge un gestore Tooltip alla raccolta di elementi.
$().tooltip(options)
Toggle: .tooltip('toggle')Commuta la visualizzazione/nascita del Tooltip dell'elemento.
$('#element').tooltip('toggle')
Show: .tooltip('show')Mostra il Tooltip dell'elemento.
$('#element').tooltip('show')
Hide: .tooltip('hide')Nasconde il Tooltip dell'elemento.
$('#element').tooltip('hide')
Destroy: .tooltip('destroy')Nasconde e distrugge il Tooltip dell'elemento.
$('#element').tooltip('destroy')

Esempio online

Esempio seguente dimostra l'uso del metodo del plugin Tooltip.

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap esempio - Plugin Tooltip</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>
<div style="padding: 100px 100px 10px;">
	Questo è un　
	<a href="#" class="tooltip-show" data-toggle="tooltip" title="show">Metodo Tooltip mostra</a>.
	Questo è un　
	<a href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">Metodo Tooltip nascondi</a>.
	Questo è un　
	<a href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">Metodo Tooltip distruggi</a>.
	Questo è un　
	<a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom" title="toggle">Metodo Tooltip toggle</a>.
	<br><br><br><br><br><br>
	<p class="tooltip-options">
		Questo è un　
		<a href="#" data-toggle="tooltip" title="<h2>'am Header2 </h2>">Metodo Tooltip opzioni</a>.
	</p>
	<script>
		function () { $('.tooltip-show').tooltip('show'); };
		$('function () { $('.tooltip-hide').tooltip('hide');});
		$('function () { $('.tooltip-destroy').tooltip('destroy');});
		$('function () { $('.tooltip-toggle').tooltip('toggle');});
		$('function () { $(".tooltip-options a").tooltip({html: true});});
	</script>
</div>
</body>
</html>
Prova a vedere ‹/›

I risultati sono come segue:

Evento

La tabella sottostante elenca gli eventi utilizzati nell'integrazione di Tooltip. Questi eventi possono essere utilizzati come hook nelle funzioni.

EventoDescrizioneEsempio
show.bs.tooltipAll'invocazione del metodo show esemplare viene scatenato immediatamente questo evento.
$('#myTooltip').on('show.bs.tooltip', function () {
　　// Eseguire alcune azioni...
}
shown.bs.tooltipQuesto evento viene scatenato quando il suggerimento è visibile all'utente (in attesa che l'effetto di transizione CSS sia completato).
$('#myTooltip').on('shown.bs.tooltip', function () {
　　// Eseguire alcune azioni...
}
hide.bs.tooltipQuesto evento viene scatenato immediatamente quando viene chiamato il metodo di esempio hide.
$('#myTooltip').on('hide.bs.tooltip', function () {
　　// Eseguire alcune azioni...
}
hidden.bs.tooltipQuesto evento viene scatenato quando il suggerimento viene nascosto all'utente (in attesa che l'effetto di transizione CSS sia completato).
$('#myTooltip').on('hidden.bs.tooltip', function () {
　　// Eseguire alcune azioni...
}

Esempio online

Di seguito è riportato un esempio che dimostra l'uso degli eventi del plugin di suggerimento (Tooltip).

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Eventi del plugin di suggerimento (Tooltip)</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>Plugin di suggerimento (Tooltip) - Anello</h4>
Questo è un <a href="#" class="tooltip-show" data-toggle="tooltip"　
	title="Tooltip predefinito" Tooltip predefinito
</a>.
<script>
function () { $('.tooltip-show').tooltip('show'); };
$((function () { $('.tooltip-show').on('show.bs.tooltip', function () {}}))
	alert("Messaggio di avviso visualizzato");
})});
</script>
</body>
</html>
Prova a vedere ‹/›

I risultati sono come segue:

Plugin di finestra emergente BootstrapPlugin di schede Bootstrap