Plug-in d'info-bulle Bootstrap que vous devez acquérir tous les jours_compétences Javascript

Les info-bulles sont très utiles lorsque vous souhaitez décrire un lien. Le plugin Tooltip a été inspiré par jQuery.tipsy écrit par Jason Frame. Le plug-in Tooltip a apporté de nombreuses améliorations. Par exemple, il n'a pas besoin de s'appuyer sur des images, mais utilise plutôt CSS pour obtenir des effets d'animation et utilise l'attribut data pour stocker les informations de titre.

Si vous souhaitez référencer les fonctionnalités de ce plugin séparément, vous devez alors référencer tooltip.js. Alternativement, comme mentionné dans le chapitre Présentation du plugin Bootstrap, vous pouvez référencer bootstrap.js ou une version minifiée de bootstrap.min.js.
1. Utilisation
Les plug-ins Tooltip génèrent du contenu et du balisage à la demande. Par défaut, les info-bulles sont placées après leurs éléments déclencheurs. Vous pouvez ajouter des info-bulles des deux manières suivantes :

1. Via l'attribut data : si vous devez ajouter une info-bulle, ajoutez simplement data-toggle="tooltip" à une balise d'ancrage. Le titre de l'ancre est le texte de l'info-bulle. Par défaut, le plugin définit l'info-bulle en haut.

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

2. Via JavaScript : Déclenchez une info-bulle via JavaScript :

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

Le plugin Tooltip n'est pas un pur plugin CSS comme les menus déroulants et autres plugins évoqués précédemment. Pour utiliser le plugin, vous devez l'activer en utilisant jquery (lire javascript). Utilisez le script suivant pour activer toutes les info-bulles sur la page :

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

2.Options
Certaines options sont ajoutées via l'API Bootstrap Data ou appelées via JavaScript. Les options sont répertoriées dans le tableau ci-dessous :

3. Info-bulle

//基本实例

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

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

Les info-bulles ont de nombreuses propriétés pour configurer l'affichage des astuces, comme suit :

<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>

La méthode JavaScript peut supprimer directement les données précédentes. Y compris : les attributs d'animation, html, placement, sélecteur, titre original, titre, déclencheur, délai, conteneur et modèle.

//JavaScript 方式

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

JavaScript dispose de quatre méthodes : afficher, masquer, basculer et détruire.

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

Il existe quatre types d'événements dans Tooltip.

//Événement, autre similaire

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

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.