Easy-to-operate jQuery form prompt plug-in_jquery

The example in this article describes a lightweight form prompt plug-in---jQuery Form Toolltip. Share it with everyone for your reference. The details are as follows:

jQuery Form Toolltip Features:

• You can customize the CSS style of the prompt information individually.
• You can specify the direction of the fade in and out. Currently, Top, Bottom, Right and Left are supported

The screenshot of the running effect is as follows:

The specific code is as follows:

jquery example: How to use jQuery Form Toolltip
Introducing core files

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

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

Write JS initialization

$(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});     
});

Define the fields array, write the form fields that need to be prompted in sequence, and then call the formatoolip function to initialize.

The above is the jQuery form tooltip plug-in shared with you: jQuery Form Toolltip , it is very practical, I hope you like it.