JCallout easily implements the bubble prompt Function

Https://github.com/anupamsmaurya/jCallout of jCallout

Need to add this reference

The html code for a user name line is:

Copy codeThe Code is as follows:
<Tr>
<Td class = "columnName"> User name: </td>
<Td> <input id = "hTbxUserName" class = "needCheck" type = "text"/> <span class = "necessary"> * </span> </td>
</Tr>

Then add the following code in js:

Copy codeThe Code is as follows:
$ ('# Htbxusername'). jCallout (
'Initwithoutshow ',{
Message: "required! ",
Position: "right ",
BackgroundColor: "# f00 ",
TextColor: "# fff ",
ShowEffect: "fade ",
Showspeed: 300,
HideEffect: "fade ",
Hidespeed: 300,
$ CloseElement: $ ('')
});

Note that jCallout has two initialization Methods: init and initWithoutShow. After the former is initialized, the bubble is immediately displayed, and the latter is not immediately displayed. You need to add the code display when necessary:

Copy codeThe Code is as follows:
Var $ userNameInput = $ ("# hTbxUserName ");
$ UserNameInput. blur (function (){
If ($ userNameInput. val (). length = 0 ){
$ UserNameInput. jCallout ('show ');
}
});

The parameter $ closeElement is the close button for setting bubbles. You can see the plug-in source code.

Copy codeThe Code is as follows:
$ CloseElement: $ ('<span style = "float: right; cursor: pointer"> (X) </span> '),

If you do not set $ closeElement: $ (''), the following information is displayed. Click (x) to close the bubble:

In addition, the bubble can also display the image and write the html code of the image to the message Parameter:

Copy codeThe Code is as follows:
Message: " required! "