Link to home
Start Free TrialLog in
Avatar of cynx
cynxFlag for India

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.)

<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>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Jon Norman
Jon Norman
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial