recherche

Maison >interface Web >js tutoriel >Le plug-in jQuery Tooltipster implémente un bel outil tips_jquery

Le plug-in jQuery Tooltipster implémente un bel outil tips_jquery

WBOY
WBOYoriginal
2016-05-16 16:04:471640parcourir

Tooltipster est un plug-in d'info-bulle jQuery léger qui peut rapidement vous aider à générer de superbes info-bulles.

1. Chargez les fichiers jQuery et plug-in, y compris Tooltipster

Après avoir téléchargé Tooltipster, déplacez tooltipster.css et jquery.tooltipster.min.js vers la racine des répertoires CSS et JavaScript. Ensuite, chargez jQuery et incluez les fichiers CSS et JavaScript Tooltipster dans vos balises : 

<head> 
... 
 
  <link rel="stylesheet" type="text/css" href="css/tooltipster.css" /> 
 
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script> 
  <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script> 
 
... 
</head>

2. Configurez votre HTML

Pour que Tooltipster fonctionne, nous devons d'abord ajouter la classe .tooltip (ou tout autre moyen de catégorie/sélection que vous souhaitez utiliser) à tout élément pour lequel nous souhaitons avoir une info-bulle. Ensuite, nous définirons l’attribut title sur ce que nous voulons que notre invite dise. Voici quelques exemples :
Image pour ajouter une info-bulle :

Copier le code Le code est le suivant :

9fe20c478cda0084da5f48a4e8d2ee36Link5db79b134e9f6b82c0b36e0489ee08ed
Ajouter une info-bulle à un div :

Copier le code Le code est le suivant :
5c2495408fae6eb4a7ca5561858c0d5b Ce div a une info-bulle lorsque vous le survolez
16b28748ea4df4d9c2150843fecfba68


3, activez Tooltipster

La dernière chose que nous devons faire est d'activer le plugin. Pour ce faire, ajoutez le script suivant juste avant votre balise de fermeture 9c3bca370b5104690d9ef395f2c5f8d1 (utilisez l'option de votre choix - dans ce cas, nous utilisons la classe .tooltip) :


Résumé : 
<head> 
  ... 
  <script> 
    $(document).ready(function() { 
      $('.tooltip').tooltipster(); 
    }); 
  </script> 
</head>

1. Les info-bulles prennent en charge le contenu des balises HTML

2.Léger

3. Flexible et efficace

4. Définition de style simple, 100% CSS

5. Prend en charge 3 thèmes

6. Prise en charge de Firefox, Chrome, IE7/8/9, Opera, Safari

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Introduction aux types d'empaquetage de base des compétences javascript_javascriptArticle suivant：Introduction aux types d'empaquetage de base des compétences javascript_javascript

Articles Liés

Voir plus