troubleshooting Question

GridView Headers tooltip using jQuery

Avatar of cynx
cynxFlag for India asked on
JavaScriptASP.NETjQuery
2 Comments1 Solution1214 ViewsLast Modified:
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>
ASKER CERTIFIED SOLUTION
Jon Norman
Information Systems Manager
Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros