Display DataList Details in ToolTip on MouseHover using jQuery in ASP.Net

Hi mann,

I have created a sample which full fill your requirement

HTML

<div>
    <asp:DataList ID="dlPlotDetails" runat="server" RepeatDirection="Horizontal">
        <ItemTemplate>
            <b>
                <asp:Label Text='<%#Eval("PlotNo") %>' runat="server" Style="background-color: Green;
                    color: white;" /></b>
        </ItemTemplate>
    </asp:DataList>
</div>
<div id="dialog" runat="server" style="display: none">
    <span id="PlotNo"></span>
    <br />
    <span id="Area"></span>
    <br />
    <span id="Dimension"></span>
    <br />
    <span id="Status"></span>
    <br />
    <span id="Customer"></span>
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=dlPlotDetails] tr').find('td').on('mouseover', function () {
                var obj = {};
                obj.plotNo = $(this).find('span')[0].innerText;
                $('#dialog')[0].style.display = 'block';
                $.ajax({
                    type: "POST",
                    url: "Datalist.aspx/GetPlotDetail",
                    data: JSON.stringify(obj),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function OnSuccess(response) {
                        var xmlDoc = $.parseXML(response.d);
                        var xml = $(xmlDoc);
                        var plotno = $.trim(xml.find('PlotNo')[0].childNodes[0].data);
                        var area = $.trim(xml.find('Area')[0].childNodes[0].data);
                        var dimension = $.trim(xml.find('Dimension')[0].childNodes[0].data);
                        var status = $.trim(xml.find('Status')[0].childNodes[0].data);
                        var customer = $.trim(xml.find('Customer')[0].childNodes[0].data);
                        $("#PlotNo").html('Plot No: ' + plotno);
                        $("#Area").html('Area: ' + area);
                        $("#Dimension").html('Dimension: ' + dimension);
                        $("#Status").html('Status: ' + status);
                        $("#Customer").html('Customer:' + customer);
                    }
                });
            });
            $('[id*=dlPlotDetails] tr').find('td').on('mouseout', function () {
                $('#dialog')[0].style.display = 'none';
            });
        });        
    </script>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
        string query = "Select PlotNo From PlotDetails";
        SqlConnection con = new SqlConnection(constr);
        SqlCommand cmd = new SqlCommand(query, con);
        SqlDataAdapter sda = new SqlDataAdapter(cmd);
        con.Open();
        DataTable dt = new DataTable();
        sda.Fill(dt);
        dlPlotDetails.DataSource = dt;
        dlPlotDetails.DataBind();
        con.Close();
    }
}

[WebMethod]
public static string GetPlotDetail(string plotNo)
{
    DataSet ds = new DataSet();
    string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
    string query = "Select * From PlotDetails WHERE PlotNo = '" + plotNo + "'";
    SqlConnection con = new SqlConnection(constr);
    SqlCommand cmd = new SqlCommand(query, con);
    using (SqlDataAdapter sda = new SqlDataAdapter())
    {
        cmd.Connection = con;
        sda.SelectCommand = cmd;
        sda.Fill(ds);
    }
    return ds.GetXml();
}

ScreenShot

Hope this works for you