使用jquery / css3在语音气泡中显示错误消息

hey there for now i am using this scripts for checking the input in my username-field:

// username-check
$(document).ready(function(){
    $("#username-field").keyup(function(event) {
        $.post("checkUsername.php", {
            username: $(this).val()
        }, 
        function(data) {
            $("#name-error").text(data.error ? data.error : "");
        }, "json");
    });
});

this jQuery is sending the typed data to an other php-script: here it is, chechUsername.php:

include "storescripts/connect_to_mysql.php";

require 'classes/UsernameChecker.php';

$config = array('DB' => $mysqli,
                'Table' => 'table',
                'Row' => 'row',
                'Output' => true,
                'Format' => 'JSON');

$usernameChecker = new UsernameChecker($config);

if(!empty($_POST['username'])) {
    if ($usernameChecker->check_regex($_POST['username'])) {    
        if($usernameChecker->check_length($_POST['username'])) {
            if (!$usernameChecker->check($_POST['username'])) {
                echo json_encode(array("error" => "Username already taken"));
            } else {
                echo json_encode(array("error" => "Username available"));
            }
        } else {
            echo json_encode(array("error" => "Username too long"));
        }
    } else {
        echo json_encode(array("error" => "Allowed symbols: a-z , A-Z , 1-9 and \"_\""));
    }
} else { 
    echo json_encode(array("error" => "Type username"));
}

depending on the input, i created some error-messages. those error-messages are displayed in:

<span class="error" id="name-error"></span>

now i want to diplay this error-messages in speech-bubbles instead, anybody got a good solution or a good tutorial or a jsfiddle for solving my problem? greetings!

You can use a div to popup.

$(document).ready(function() {

// Here we will write a function when link click under class popup                 
$('a.popup').click(function() {


// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link                          
var popupid = $(this).attr('rel');


// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$('#' + popupid).fadeIn();


// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();

// Now here we need to have our popup box in center of 
// webpage when its fadein. so we add 10px to height and width 
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;


// Then using .css function style our popup box for center allignment
$('#' + popupid).css({
'margin-top' : 0,
'margin-left' : -popupleftmargin
});
return false;
});


// Now define one more function which is used to fadeout the 
// fade layer and popup window as soon as we click on fade layer
$('#fade').click(function() {


// Add markup ids of all custom popup box here                        
$('#fade , #popuprel , .close, .popupbox').fadeOut()
return false;
});

$('.close').click(function() {


// Add markup ids of all custom popup box here                        
$('#fade , #popuprel , .close, .popupbox').fadeOut()
return false;
});
});