jquery tooltip from database

Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/07/jquery-tooltip-from-database.html In this video, we will discuss how to retrieve tooltip text from database and display using jquery tooltip widget. The tooltip text should be retrieved from the database using ajax and display it using jquery tooltip widget Stored procedure to retrieve tooltip text by fieldname Create proc spGetTooltip @FieldName nvarchar(50) as Begin Select * from tblTooltip where FieldName = @FieldName End WebService using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Web.Script.Serialization; using System.Web.Services; namespace Demo { [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] [System.Web.Script.Services.ScriptService] public class TooltipService : System.Web.Services.WebService { [WebMethod] public void GetTooltip(string fieldName) { string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString; Tooltip tooltip = new Tooltip(); using (SqlConnection con = new SqlConnection(cs)) { SqlCommand cmd = new SqlCommand("spGetTooltip", con); cmd.CommandType = CommandType.StoredProcedure; SqlParameter parameter = new SqlParameter(); parameter.ParameterName = "@FieldName"; parameter.Value = fieldName; cmd.Parameters.Add(parameter); con.Open(); SqlDataReader rdr = cmd.ExecuteReader(); while (rdr.Read()) { tooltip.FieldName = rdr["FieldName"].ToString(); tooltip.TooltipText = rdr["TooltipText"].ToString(); } } JavaScriptSerializer js = new JavaScriptSerializer(); Context.Response.Write(js.Serialize(tooltip)); } } } jQuery code $(document).ready(function () { $('.displayTooltip').tooltip({ content: getTooltip }); function getTooltip() { var returnValue = ''; $.ajax({ url: 'TooltipService.asmx/GetTooltip', method: 'post', data: { fieldName: $(this).attr('id') }, dataType: 'json', async: false, success: function (data) { returnValue = data.TooltipText; } }); return returnValue; } }); HTML <table> <tr> <td>First Name</td> <td> <input id="firstName" class="displayTooltip" title="" type="text" /> </td> </tr> <tr> <td>Last Name</td> <td> <input id="lastName" class="displayTooltip" title="" type="text" /> </td> </tr> <tr> <td>Department</td> <td> <input id="department" class="displayTooltip" title="" type="text" /> </td> </tr> </table>