<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQueryDemo.aspx.cs" Inherits="Asp.netTooltipUsingJqueryUI.jQueryDemo" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
    <script src="jQuery%20Package/jquery-2.1.4.js"></script>
    <link href="jQuery%20Package/jquery-ui.css" rel="stylesheet" />
    <script src="jQuery%20Package/jquery-ui.js"></script>
    <link href="jQuery%20Package/jquery-ui.structure.css" rel="stylesheet" />
    <link href="jQuery%20Package/jquery-ui.theme.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {

            $('.tooltips').tooltip({
                content: getTooltipText
            });

            function getTooltipText() {
                var rtnValue = '';
                $.ajax({
                    method: "POST",
                    dataType: "json",
                    url: "TooltipDataService.asmx/GetTooltipData",
                    data: { controlName: $(this).attr('id') },
                    async: false,
                    success: function (data) {
                        rtnValue = data.tooltipData;
                    }
                });
                return rtnValue;
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table border="1">
                <tr>
                    <td><b>Name: </b></td>
                    <td>
                        <input type="text" title="" id="Name" class="tooltips" /></td>
                </tr>

                <tr>
                    <td><b>Salary: </b></td>
                    <td>
                        <input type="text" title="" id="Salary" class="tooltips" /></td>
                </tr>

                <tr>
                    <td><b>Email Id: </b></td>
                    <td>
                        <input type="text" title="" id="EmailId" class="tooltips" /></td>
                </tr>

                <tr>
                    <td><b>Designation: </b></td>
                    <td>
                        <input type="text" title="" id="Designation" class="tooltips" /></td>
                </tr>
            </table>

        </div>
    </form>
</body>
</html>
