jCallout easily implements bubble prompt function_jquery

Download address of jCallout: https://github.com/anupamsmaurya/jCallout

Need to add this reference

The html code of the username line is:

Copy code The code is as follows:

Username:
 

Then add the following code in js:

Copy code The code is as follows:

$('#hTbxUserName').jCallout(
'initWithoutShow',{
message: "Required!",
position: "right",
backgroundColor: "#f00",
textColor: "#fff",
showEffect: "fade",
showSpeed: 300,
hideEffect: "fade",
hideSpeed: 300,
$closeElement: $('')
});

It should be noted that jCallout has two initialization methods: init and initWithoutShow. The former will display bubbles immediately after initialization, while the latter will not display immediately. Add code to display when needed:

Copy code The code is as follows:

var $userNameInput = $("#hTbxUserName");
$userNameInput.blur(function() {
if($userNameInput.val().length==0){
$userNameInput.jCallout('show');
}
});

The parameter $closeElement is to set the close button of the bubble. If you look at the plug-in source code, you will find

Copy code The code is as follows:

$closeElement: $('(X)'),

If $closeElement: $('') is not set, the following display will appear, and, Click (x) to close the bubble:

In addition, the bubble can also display pictures, just write the html code of the picture into the message parameter:

Copy code The code is as follows:

message: "Required! "