cynx
asked on
GridView Headers tooltip using jQuery
I have a requirement to display tooltips for gridview (asp) headers, (using jQuery with its custom CSS) which is in user control.
When applied the tooltip displays with its CSS but the original CSS for the grid is lost.
Sample code below (what I implemented)
The tooltips for the headers is set in code behind row-data bound event.
Any idea why the original CssClass="Grid" is being overwritten?
(When I remove the jQuery, CSS comes fine.)
When applied the tooltip displays with its CSS but the original CSS for the grid is lost.
Sample code below (what I implemented)
The tooltips for the headers is set in code behind row-data bound event.
Any idea why the original CssClass="Grid" is being overwritten?
(When I remove the jQuery, CSS comes fine.)
<script type="text/javascript" src="JS/jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#grd [title]").tooltip({
offset: [0, 20],
effect: 'slide',
relative: true
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<div id="grd">
<asp:GridView ID="GridView1" runat="server" CssClass="Grid">
</asp:GridView>
</div>
</td>
</tr>
</table>
</body>
<style type="text/css">
.tooltip {
display:none;
background-color:Black;
color:White;
font-size:14px;
border-style:outset;
height:50px;
width:160px;
}
</style>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://www.aspdotnet-suresh.com/2011/05/how-to-show-tooltip-for-gridview-header.html
http://www.aspdotnet-suresh.com/2011/12/jquery-change-style-of-tooltip-in.html
http://msdn.microsoft.com/en-us/library/system.windows.controls.gridview.columnheadertooltip.aspx