Plug-in_jquery d'invite de formulaire jQuery facile à utiliser

L'exemple de cet article décrit un plug-in d'invite de formulaire léger --- jQuery Form Toolltip. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Info-bulle du formulaire jQuery Caractéristiques :

• Vous pouvez personnaliser le style CSS des informations d'invite individuellement.
• Vous pouvez spécifier la direction du fondu entrant et sortant. Actuellement, Haut, Bas, Droite et Gauche sont pris en charge

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

Exemple jquery : Comment utiliser jQuery Form Toolltip
Présentation des fichiers de base

<script src="js/jquery/2.1.1/jquery.min.js"></script>
<script src="src/jquery.formtooltip.js"></script>

Construire du HTML

<form id="formname">
 <table>
  <tr>
   <td> Title </td>
   <td><input type="text" value="blank" name="title"/></td>
  </tr>
  <tr>
   <td> Name </td>
   <td><input type="name" value="Blank Name" name="name"/></td>
  </tr>
  <tr>
   <td> Color </td>
   <td><input type="color" value="#000FFF" name="color"/></td>
  </tr>
  <tr>
   <td> TextArea </td>
   <td><textarea type="month" value="" name="text"></textarea></td>
  </tr>
 </table>
</form>

Écrire l'initialisation JS

$(document).ready(function(){
  var fields = {      
      title: {
        tooltip : "This field is actually for bla bla bla...</br>and bla bla bla",
        position: 'bottom'
      },
      name : {
        tooltip: "This is for fun!!!!", //提示的信息
        position: 'right',       //动画的方向
        backgroundColor: "#FF0000",  //背景颜色
        color: '#FFFF00'        //字体颜色
        },
      color : {
        tooltip: "This is for your cover color~~~<a href='#'>here</a>"
        },
      text : {
        tooltip: "Please provide your comment here."
        }
      };
 
  //Include Global Color 
  $("#formname").formtoolip(fields, { backgroundColor: "#000000" , color : "#FFFFFF", fontSize : 15, padding : 10, borderRadius : 5});     
});

Définissez le tableau des champs, écrivez les champs du formulaire qui doivent être demandés dans l'ordre, puis appelez la fonction formatoolip pour l'initialiser.

Ce ci-dessus est le plug-in d'info-bulle du formulaire jQuery partagé avec vous : jQuery Form Toolltip , c'est très pratique, j'espère qu'il vous plaira.