I have tool-tip that pops up on mouse over but what i would like to see is to show the tool-tip on specific column only like when i mouse over on column 2. Currently, the tool-tip is showing up on every column and that a bit distracting. Here is my code:
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
</Columns>
</asp:GridView>
<style type="text/css">
body
{
font-size: 10pt;
font-family: Arial;
}
.tooltip
{
position: absolute;
top: 0;
left: 0;
z-index: 3;
display: none;
background-color: #FB66AA;
color: White;
padding: 5px;
max-width: 150px;
font-size: 10pt;
font-family: Arial;
}
td
{
cursor: pointer;
}
</style>
<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('[id*=GridView1] tr').each(function () {
var toolTip = $(this).attr("title");
$(this).find("td").each(function () {
$(this).simpletip({
content: toolTip
});
});
$(this).removeAttr("title");
});
});
</script>
and here is my code behind:
protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.ToolTip = (e.Row.DataItem as DataRowView)["Description"].ToString();
}
}
thanks
You are adding tooltip on row.if you want to add tooltip to cell try following code
Update Check out following link for complete example
Using the jQuery Tooltip Plugin in a GridView