отображение ошибок-сообщений в речи пузыри с помощью Jquery/CSS3

Question

эй там, теперь я использую эти сценарии для проверки ввода в моем имени пользователя поле:

// 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"); 
    }); 
}); 

это JQuery отправляет набранные данные на другой PHP-скрипт: здесь, 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")); 
} 

в зависимости от входных данных, я создал некоторые ошибки-сообщения. эти ошибки-сообщения отображаются в:

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

теперь я хочу, чтобы Diplay этой ошибки-сообщения в речи пузыри вместо этого, кто получил хорошее решение или хороший учебник или jsfiddle для решения моей проблемы? Привет!

Answer 1

Вы можете использовать div для всплывания.

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