Les info-bulleurs sont très utiles lorsque vous souhaitez décrire un lien. Le plugin d'inscription à Tools est inspiré par jQuery.tipsy écrit par Jason Frame. Le plug-in à tool info a apporté de nombreuses améliorations, telles que ne pas compter sur les images, mais à la place en utilisant CSS pour réaliser des effets d'animation et en utilisant des attributs de données pour stocker les informations du titre.
Si vous souhaitez référencer la fonctionnalité du plugin séparément, vous devez référencer TooltIp.js. Ou, comme mentionné dans le chapitre Bootstrap Plugin Présentation, vous pouvez vous référer à bootstrap.js ou versions compressées de bootstrap.min.js.
1. Utilisation
Les plug-ins de l'info-bulle génèrent du contenu et des balises en fonction des exigences. Par défaut, les info-bulles sont placées derrière leurs éléments de déclenchement. Il existe deux façons d'ajouter des info-bulleurs:
1. Grâce à l'attribut de données: 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 = "tooltp"> Veuillez survoler moi </a>
2. Via JavaScript: déclencheur Info-bulle (info-bulle) via JavaScript:
$ ('# identificateur'). Infilation (options)Le plugin d'info-bulle n'est pas comme les menus déroulants et les autres plug-ins discutés précédemment, ce n'est pas un plug-in pur CSS. Pour utiliser le plugin, vous devez l'activer à l'aide de jQuery (lire JavaScript). Utilisez le script suivant pour activer toutes les info-bullets dans la page:
$ (function () {$ ("[data-toggle = 'toolfp']"). toolfip ();});2. Options
Il existe certaines options qui sont ajoutées via l'API de données bootstrap (API de données bootstrap) ou appelée via JavaScript. Le tableau suivant répertorie ces options:
trois. Infractions
// Exemple de base <a href = "#" data-toggle = "ToolTip"> html5 </a> // La partie JS doit déclarer $ ('# section'). ToolTip ();Les info-bulles ont de nombreuses propriétés pour configurer l'affichage des invites, comme suit:
<a href = "#" rel = "tooltip" data-toggle = "tooltip" data-animation = "false" data-html = "true" data-plaflasting = "auto" data-selector = "a [rel = tooltip]" data-trigger = "cliquez" data-delay = "500" data-template = "<b> 123 </b>"> html5 </a>
Supprimez simplement les données précédentes en JavaScript. Y compris: Animation, HTML, placement, sélecteur, titre original, titre, déclencheur, retard, conteneur et modèle et autres propriétés.
// Méthode JavaScript $ ('# section A'). Infotip ({retard: {show: 500, masquer: 100,}, conteneur: 'body'});Il existe quatre méthodes pour JavaScript: afficher, cacher, basculer et détruire.
// Show $ ('# section A'). ToolTip ('show'); // masquer $ ('# section A'). ToolTip ('masquer'); // invert show and masquer $ ('# section a'). TooltIp ('toggle'); // masquer et détruire $ ('# section a').Il existe quatre types d'événements dans l'influence.
// événements, autres similitudes
$ ('# select a'). on ('show.bs.tooltip', function () {alert ('free lorsque le spectacle est appelé!');});Cette série de didacticiels a été compilée dans: Bootstrap Basic Tutorials Touss spéciaux, bienvenue pour cliquer pour apprendre.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.