GridView Headers tooltip using jQuery

cynx
cynx used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Information Systems Manager
Top Expert 2012
Commented:
Hi,

I'd suggest that it is the tooltip that is doing this, it is modifying the dom so your styling for the class Grid might not be taking effect for example the css selector .grd>div.Grid might not work on the elements anymore becase the things with class Grid might not be in the same place in the dom. Can you provide the css selectors for that class.

Also tooltip (if it was written really badly) might be just changing the class at which point I don't know, but you might find that out by doing:

<script type="text/javascript">
    $(document).ready(function() {
    alert($("#grd [title]").length);
    $("#grd [title]").tooltip({
        offset: [0, 20],
        effect: 'slide',        
        relative: true

    });
    alert($("#grd [title]").length);
    });

</script>

Open in new window

if the tooltip has changed the class then you will get a different count before and after. You could add it back in by doing:

<script type="text/javascript">
  $(document).ready(function() {
    $("#grd [title]").each(function(){
      thisClass=$(this).attr("class");
      $(this).tooltip({
        offset: [0, 20],
        effect: 'slide',        
        relative: true
      }).addClass(thisClass);
    });
  });

</script>

Open in new window


Good Luck!!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial