Tutoriel de base Bootstrap

Plugins Bootstrap

Plugin de boîte de dialogue Bootstrap Plugin de onglets Bootstrap

Plugin d'infobulle (Tooltip) Bootstrap

Lorsque vous souhaitez décrire un lien, l'infobulle (Tooltip) est très utile. Le plugin d'infobulle (Tooltip) Bootstrap est inspiré de Jason Frame écrit par jQuery.tipsy pour vous inspirer. Le plugin d'infobulle (Tooltip) Bootstrap a apporté de nombreuses améliorations, par exemple, il n'a pas besoin de dépendre des images, mais utilise plutôt CSS pour réaliser des animations, et stocke les informations de titre dans les attributs data.

si vous souhaitez utiliser les fonctionnalités de l'extension individuellement, vous devez utiliser tooltip.js。 Ou, comme Aperçu des plugins Bootstrap comme mentionné dans le chapitre bootstrap.js ou la version compressée bootstrap.min.js。

Utilisation

Le plugin d'infobulle (Tooltip) génère du contenu et des balises en fonction des besoins, par défaut, il place l'infobulle (tooltip) derrière leurs éléments déclencheurs. Vous pouvez ajouter l'infobulle (tooltip) de deux manières :

à travers l'attribut data：Pour ajouter un tooltip, il suffit d'ajouter data-toggle="tooltip" C'est tout. Le texte de l'ancrage title est le texte du tooltip. Par défaut, l'extension place le tooltip en haut.
```
<a　href="#"　data-toggle="tooltip" title="Tooltip exemple">Suspendez votre souris dessus</a>
```
Par JavaScript：Déclencher le tooltip avec JavaScript :
```
$('#identifier').tooltip(options)
```

L'extension Tooltip (Tooltip) n'est pas une extension CSS pure comme les menus déroulants et les autres extensions mentionnées précédemment. Pour utiliser cette extension, vous devez l'activer avec jQuery (lire JavaScript). Utilisez le script suivant pour activer tous les tooltips sur la page :

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

Exemple en ligne

Les exemples ci-dessous montrent comment utiliser l'extension Tooltip (Tooltip) via l'attribut data.

Exemple en ligne

Exemple

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemple Bootstrap　-　Extension Tooltip (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 Tooltip (Tooltip)　-　Ancrage</h4>
C'est un <a href="#" class="tooltip-test" data-toggle="tooltip" title="Tooltip par défaut">Tooltip par défaut</a>.
C'est un <a href="#" class="tooltip-test" data-toggle="tooltip"　data-placement="left" title="Tooltip de côté gauche">Tooltip de côté gauche</a>.
Ceci est un <a href="#" data-toggle="tooltip"　data-placement="top" title="Tooltip du haut">Tooltip du haut</a>.
Ceci est un <a href="#" data-toggle="tooltip"　data-placement="bottom" title="Tooltip du bas">Tooltip du bas</a>.
Ceci est un <a href="#" data-toggle="tooltip"　data-placement="right" title="Tooltip de côté droit">Tooltip de côté droit</a>
<br>
<h4>Plugin Tooltip (Tooltip)　-　bouton</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="Tooltip par défaut">Tooltip par défaut</button>}})
<button type="button" class="btn btn-default" data-toggle="tooltip"　data-placement="left" title="Tooltip de côté gauche">Tooltip de côté gauche
</button>}})
<button type="button" class="btn btn-default" data-toggle="tooltip"　data-placement="top" title="Tooltip du haut">Tooltip du haut
</button>}})
<button type="button" class="btn btn-default" data-toggle="tooltip"　data-placement="bottom" title="Tooltip du bas">Tooltip du bas
</button>}})
<button type="button" class="btn btn-default" data-toggle="tooltip"　data-placement="right" title="Tooltip de côté droit">Tooltip de côté droit</button>}})
<script>
	$((function () { $("[data-toggle='tooltip']").tooltip();　});
</script>
</body>
</html>

Vérifiez et voyez‹/›

Les résultats sont affichés comme suit :

Options

Certaines options sont ajoutées par l'API de données Bootstrap (Bootstrap Data API) ou appelées par JavaScript. Le tableau suivant liste ces options :

Nom de l'option	Type/Valeur par défaut	Nom de l'attribut de données	Description
animation	boolean Valeur par défaut : true	data-animation	L'outil d'indication utilise l'effet de filtre de dégradé CSS.
html	boolean Valeur par défaut : false	data-html	Insérer du HTML dans l'outil d'indication. Si false, la méthode jQuery text est utilisée pour insérer du contenu dans le dom. Si vous vous inquiétez des attaques XSS, utilisez text.
placement	string\|function Valeur par défaut : top	data-placement	Spécifier la manière de positionner l'outil d'indication (c'est-à-dire top\|bottom\|left\|right\|auto). Lorsque spécifié auto Lorsque, il ajuste dynamiquement l'outil d'indication. Par exemple, si placement est "auto left", l'outil d'indication sera affiché à gauche dès que possible, et il sera affiché à droite si la situation ne le permet pas.
selector	string Valeur par défaut : false	data-selector	Si un sélecteur est fourni, l'objet d'indication est délégué au destinataire spécifié.
title	string \| function Valeur par défaut : ''	data-title	Si non spécifié title Si l'attribut n'est pas spécifié, la valeur par défaut de l'option title est utilisée.
trigger	string Valeur par défaut : 'hover focus'	data-trigger	Définir la manière de déclencher l'outil d'indication : click\| hover \| focus \| manual。Vous pouvez passer plusieurs déclencheurs, séparés par des espaces.
delay	number \| object Valeur par défaut : 0	data-delay	Nombre de millisecondes pour afficher et masquer l'outil d'indication. - Non applicable pour le type de déclenchement manuel. Si un nombre est fourni, le délai sera appliqué à l'affichage et au masquage. Si un objet est fourni, la structure est la suivante : delay: {　show:　500,　hide:　100　}
container	string \| false Valeur par défaut : false	data-container	Ajouter un outil d'indication à l'élément spécifié. Exemple : container: 'body'

Méthodes

Voici quelques méthodes utiles pour le plugin Tooltip (Tooltip):

Méthodes	Description	Exemple
Options: .tooltip(options)	Ajouter un hôte de outil d'indication aux ensembles d'éléments.	$().tooltip(options)
Toggle: .tooltip('toggle')	Basculer l'affichage/Masquer le Tooltip de l'élément.	$('#element').tooltip('toggle')
Show: .tooltip('show')	Afficher le Tooltip de l'élément.	$('#element').tooltip('show')
Hide: .tooltip('hide')	Masquer le Tooltip de l'élément.	$('#element').tooltip('hide')
Destroy: .tooltip('destroy')	Masquer et supprimer le Tooltip de l'élément.	$('#element').tooltip('destroy')

Exemple en ligne

Les exemples ci-dessous montrent l'utilisation de la méthode de l'extension Tooltip (Tooltip).

Exemple en ligne

Exemple

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemple Bootstrap　-　Méthode de l'extension Tooltip (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;">
	Ceci est une　
	<a　href="#"　class="tooltip-show"　data-toggle="tooltip"　title="afficher">Méthode Tooltip　afficher</a>.
	Ceci est une　
	<a　href="#"　class="tooltip-hide"　data-toggle="tooltip"　data-placement="gauche"　title="hide">Méthode Tooltip　hide</a>.
	Ceci est une　
	<a　href="#"　class="tooltip-destroy"　data-toggle="tooltip"　data-placement="haut"　title="destroy">Méthode Tooltip　destroy</a>.
	Ceci est une　
	<a　href="#"　class="tooltip-toggle"　data-toggle="tooltip"　data-placement="bas"　title="toggle">Méthode Tooltip　toggle</a>.
	<br><br><br><br><br><br>
	<p　class="tooltip-options"　>
		Ceci est une　
		<a　href="#"　data-toggle="tooltip"　title="<h2>'en Entête2　</h2>">Méthode Tooltip　options</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>

Vérifiez et voyez‹/›

Les résultats sont affichés comme suit :

Événement

Le tableau suivant liste les événements utilisés dans le plugin Tooltip (Tooltip). Ces événements peuvent être utilisés comme hooks dans les fonctions.

Événement	Description	Exemple
show.bs.tooltip	Cet événement est déclenché immédiatement lorsque la méthode show est appelée.	$('#myTooltip').on('show.bs.tooltip', function () { 　　//　Effectuer certaines actions... }
shown.bs.tooltip	Cet événement est déclenché lorsque le Tooltip est visible pour l'utilisateur (le délai de transition CSS est attendu).	$('#myTooltip').on('shown.bs.tooltip', function () { 　　//　Effectuer certaines actions... }
hide.bs.tooltip	Cet événement est déclenché immédiatement lorsque la méthode hide est appelée.	$('#myTooltip').on('hide.bs.tooltip', function () { 　　//　Effectuer certaines actions... }
hidden.bs.tooltip	Cet événement est déclenché lorsque le Tooltip est caché pour l'utilisateur (le délai de transition CSS est attendu).	$('#myTooltip').on('hidden.bs.tooltip', function () { 　　//　Effectuer certaines actions... }

Exemple en ligne

Les exemples suivants montrent l'utilisation des événements du plugin Tooltip (Tooltip).

Exemple en ligne

Exemple

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemple Bootstrap　-　Événements plugin Tooltip (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 Tooltip (Tooltip)　-　Ancrage</h4>
C'est un <a href="#" class="tooltip-show"　data-toggle="tooltip"　
	title="Tooltip par défaut">Tooltip par défaut
</a>.
<script>
$(function　()　{　$('.tooltip-show').tooltip('show');});
$(function　()　{　$('.tooltip-$('function () { $('.tooltip
	alert("Message d'alerte à l'affichage");
})});
</script>
</body>
</html>

Vérifiez et voyez‹/›

Les résultats sont affichés comme suit :

Plugin de boîte de dialogue Bootstrap Plugin de onglets Bootstrap