Avatar of cynx
cynx
Flag 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

jQueryJavaScriptASP.NET

Avatar of undefined
Last Comment
Jon Norman

8/22/2022 - Mon
jagssidurala

ASKER CERTIFIED SOLUTION
Jon Norman

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck