How to show AJAX response in a tooltip?

I am working on a requirement. It says when user hovers over the name it should show the data of the user like mobile number,email id in a tool tip. I am able to capture the name on hover and able to get the data. I am not able to show the data in a tool tip. This is i have tried.

one.php
<html>

    <head>
        <script src="assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script>  
        <script src="js/tooltip.js" type="text/javascript"></script>
        <script>

        function getdata(){
            var data1=document.getElementById('lbl1').innerHTML;

            alert(data1);
            var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
        xmlhttp.onreadystatechange = function()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {

                                //var showtip=xmlhttp.responseText
                                //alert(showtip);
                                $("#showtip").html(xmlhttp.responseText);
                                $("#showtip").tooltip();

            }
    }
    xmlhttp.open("POST", "tooltipajax.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("data1="+data1);

        }


        </script>


    </head>
    <body>


        <label id="lbl1" onmouseover="getdata()">John</label>


        <div id="showtip"></div>

    </body>

</html>

This is my AJAX page.

require_once("./Connections/finalkms.php");
mysql_select_db($database_finalkms, $finalkms);
$data1=$_POST['data1'];
echo $data1;echo "\n";

$query_getdata123 = "Select * from assetowner where AssetOwnerName='".$data1."'";
$getdata123 = mysql_query($query_getdata123, $finalkms) or die(mysql_error());
$row_getdata123 = mysql_fetch_assoc($getdata123);
$totalRows_getdata123 = mysql_num_rows($getdata123);
echo $row_getdata123['EmailId']; echo "\n";
echo $row_getdata123['ContactNo'];
?>

I am using jQueryTools for this:http://jquerytools.org/demos/tooltip/index.html

I am getting this error:Cannot find tooltip for [object Object]

Please help me in achieving this requirement.

Solution

You have misundestood the concept of the plugin. It shows title attribute of a hovered element in a special box allowing you to style it using css. Thats it. So you need to put entire html you want to display inside title attribute.

http://jsfiddle.net/L48Qz/ - working demo

$(function(){
    $('#lbl1').one('mouseover', function(){ //you need to load data only once!
        var $this = $(this),
            data1 = $this.text(); //get label text or whatever you need
        console.log(data1);

        $.post( //do not create XMLHttpRequest manually
        '/echo/html/', //use real url
        { 
            html: 'some server response', //this line is just a fixture
            data1: data1 //actual data
        }, 
        function(data){ //success callback
            $this.attr('title', data) //set title attribute
                 .tooltip() //init tooltip
                 .mouseover(); //trigger mouseover once again to show tooltip
        });
    });
});