jquery tooltip from database

Показать описание

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

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
{
[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.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({
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>