In this article I will explain with an example, how to how to display (show) in ToolTip on MouseHover using jQuery UI ToolTip plugin in ASP.Net.
HTML Markup
The HTML Markup consists of an ASP.Net GridView with two BoundField columns.
The GridView has been assigned with OnRowDataBound event handler.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" />
<asp:BoundField DataField="Name" HeaderText="Name" />
</Columns>
</asp:GridView>
Namespaces
You will need to import the following namespace.
C#
VB.Net
Binding GridView
Inside the Page Load event handler, the GridView is populated with dummy records.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] {
new DataColumn("Id", typeof(int)),
new DataColumn("Name", typeof(string)),
new DataColumn("Description", typeof(string)) });
dt.Rows.Add(1, "John Hammond", "Works as a scientist in USA.");
dt.Rows.Add(2, "Mudassar Khan", "ASP.Net programmer and consultant in India.");
dt.Rows.Add(3, "Suzanne Mathews", "Content Writer in France.");
dt.Rows.Add(4, "Robert Schidner", "Wild life photographer in Russia.");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(2) {
New DataColumn("Id", GetType(Integer)),
New DataColumn("Name", GetType(String)),
New DataColumn("Description", GetType(String))})
dt.Rows.Add(1, "John Hammond", "Works as a scientist in USA.")
dt.Rows.Add(2, "Mudassar Khan", "ASP.Net programmer and consultant in India.")
dt.Rows.Add(3, "Suzanne Mathews", "Content Writer in France.")
dt.Rows.Add(4, "Robert Schidner", "Wild life photographer in Russia.")
GridView1.DataSource = dt
GridView1.DataBind()
End If
End Sub
Binding ToolTip contents to the GridView Row
Inside the OnRowDataBound event handler, the Description column is set as ToolTip for the GridViewRow.
This ToolTip will be displayed, when the mouse if moved over the GridViewRow.
C#
protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.ToolTip = (e.Row.DataItem as DataRowView)["Description"].ToString();
}
}
VB.Net
Protected Sub OnRowDataBound(sender As Object, e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
e.Row.ToolTip = TryCast(e.Row.DataItem, DataRowView)("Description").ToString()
End If
End Sub
Implementing jQuery UI ToolTip
Inside the HTML, following jQuery UI Tooltip CSS file is inherited.
1. jquery-ui.css
Then following jQuery and jQuery UI Tooltip JS Script files are inherited.
1. jquery.min.js
2. jquery-ui.js
Inside the jQuery document ready event handler, the jQuery UI Tooltip plugin is applied to all the Rows except the first Row i.e. the Header Row.
Thus, when mouse is moved over cell the title will be displayed in ToolTip.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=GridView1] tr').not("tr:first-child").tooltip();
});
</script>
Screenshot
Demo
Downloads