In this article, we will show some tooltips on textboxes and the tooltip text will come through our SQL Database tables for each textbox. We will achieve this using the following agenda.

Thinking it to be very difficult, hold on...first read the article then you will come to know, how easy it is.

You can download the source code here.

Solution

Step 1: Create database with some sample data. You can use your own data or use the following script.

  1. CREATETABLEdbo.TooltipEmployees(controlNameNVARCHAR(100) NULL,
  2. tooltipDataNVARCHAR(100) NULL);
  4. INSERTINTOdbo.TooltipEmployees(controlName,
  5. tooltipData)
  6. VALUES(N 'Name', N 'PleaseenterasinIdproof');
  8. INSERTINTOdbo.TooltipEmployees(controlName,
  9. tooltipData)
  10. VALUES(N 'Salary', N 'Enterasperpayslip');
  12. INSERTINTOdbo.TooltipEmployees(controlName,
  13. tooltipData)
  14. VALUES(N 'EmailId', N 'Enterofficialemail');
  16. INSERTINTOdbo.TooltipEmployees(controlName,
  17. tooltipData)
  18. VALUES(N 'Designation', N 'Enterasperpayslip');
  20. CREATEPROCspGetTooltipData@ controlNameNVARCHAR(100)
  21. AS
  22. BEGIN
  23. SELECTte.*
  24. FROMdbo.TooltipEmployeeste
  25. WHEREte.controlName = @controlName;
  26. END;
Our database table will look like the following:

result

Step 2: Create an Empty ASP.NET Web application.

empty web application

empty templete

Step 3: Add a class file.

add new item

Step 4: Replace with the following code.
  1. namespaceAsp.netTooltipUsingJqueryUI {
  2. publicclassTooltip {
  3. publicstringcontrolName {
  4. get;
  5. set;
  6. }
  7. publicstringtooltipData {
  8. get;
  9. set;
  10. }
  11. }
  12. }
Step 5: Add a new web service file.

add webservice

Step 6: Replace with the following code.
  1. usingSystem.Configuration;
  2. usingSystem.Data;
  3. usingSystem.Data.SqlClient;
  4. usingSystem.Web.Script.Serialization;
  5. usingSystem.Web.Services;
  7. namespaceAsp.netTooltipUsingJqueryUI {
  9. [WebService(Namespace = "http://tempuri.org/")]
  10. [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
  11. [System.ComponentModel.ToolboxItem(false)]
  12. [System.Web.Script.Services.ScriptService]
  13. publicclassTooltipDataService: System.Web.Services.WebService {
  14. [WebMethod]
  15. publicvoidGetTooltipData(stringcontrolName) {
  16. stringCS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
  18. TooltiptoolTip = newTooltip();
  20. using(SqlConnectioncon = newSqlConnection(CS)) {
  21. con.Open();
  22. SqlCommandcmd = newSqlCommand("spGetTooltipData", con);
  23. cmd.CommandType = CommandType.StoredProcedure;
  25. cmd.Parameters.AddWithValue("@controlName", controlName);
  27. SqlDataReaderdr = cmd.ExecuteReader();
  29. while (dr.Read()) {
  30. toolTip.controlName = dr["controlName"].ToString();
  31. toolTip.tooltipData = dr["tooltipData"].ToString();
  32. }
  34. JavaScriptSerializerserializer = newJavaScriptSerializer();
  35. Context.Response.Write(serializer.Serialize(toolTip));
  36. }
  37. }
  38. }
  39. }
Note: Go to Web.config file and add the connection strings to your database.
  1. <connectionStrings>
  2. <addconnectionString="DataSource=.;InitialCatalog=DemoDB;IntegratedSecurity=True"name="DBCS"providerName="System.Data.SqlClient"/>
  3. </connectionStrings>
Explanation of Web Service code:

Step 7: Now let's check our webservice, if it is returning correct data from database or not. Press Ctrl + F5.

returning correct data from database

get tooltip

run

Now you can see that our web service is returning correct data in JSON format.

Step 8: Add a new Web form to implement our front end code.

add web form

Step 9: Go to source mode of Web form and add the following code in the body tag.

  1. <tableborder="1">
  2. <tr>
  3. <td><b>Name:</b></td>
  4. <td>
  5. <inputtype="text" title="" id="Name" class="tooltips" />
  6. </td>
  7. </tr>
  9. <tr>
  10. <td><b>Salary:</b></td>
  11. <td>
  12. <inputtype="text" title="" id="Salary" class="tooltips" />
  13. </td>
  14. </tr>
  16. <tr>
  17. <td><b>EmailId:</b></td>
  18. <td>
  19. <inputtype="text" title="" id="EmailId" class="tooltips" />
  20. </td>
  21. </tr>
  23. <tr>
  24. <td><b>Designation:</b></td>
  25. <td>
  26. <inputtype="text" title="" id="Designation" class="tooltips" />
  27. </td>
  28. </tr>
  29. </table>
Note: The id of each of the HTML element should be same that you have stored in your database.

Step 10: To add the jQuery references, visit my article here and follow step 5 and step 9 to download jQueryUI files and add their references or you can just download the code file attached with this article.

Step 11: Add the following jQuery code to the head section.
  1. < scripttype = "text/javascript" > $(document).ready(function() {
  3. $('.tooltips').tooltip({
  4. content: getTooltipText
  5. });
  7. functiongetTooltipText() {
  8. varrtnValue = '';
  9. $.ajax({
  10. method: "POST",
  11. dataType: "json",
  12. url: "TooltipDataService.asmx/GetTooltipData",
  13. data: {
  14. controlName: $(this).attr('id')
  15. },
  16. async: false,
  17. success: function(data) {
  18. rtnValue = data.tooltipData;
  19. }
  20. });
  21. returnrtnValue;
  22. }
  23. }); < /script>
Explanation of jQuery code:

Step 12: Now save all the changes, press Ctrl + F5 and you will see the following:

grid view

enter details

grid

enter official email

enter as per payslip

Have you ever wondered how easy to do it using jQuery.

Hope you enjoyed this!