JQuery mouse over Question? RSS

• • Reply
  

  cenk1536

  Contributor

  2503 Points

  2119 Posts

  Re: JQuery mouse over Question?

  Sep 29, 2011 12:17 PM|LINK

  Hi,

  Why this tooltip does NOT pop up over the gridview but displays on the same z-index???

  Best Regards

  Here is markup:

  <div id="tooltip999" class="tooltip999">
      </div>
  
  ...

  <asp:TemplateField HeaderText="Last Delivery Date" SortExpression="DeliveryDate"
                                      ItemStyle-Width="150px">
                                      <ItemTemplate>
                                          <asp:Label ID="LastDeliveryDate" runat="server" Text='<%# Bind("DeliveryDate","{0:dd MMMM yyyy}") %>'
                                              CssClass="anchor1"></asp:Label>
                                      </ItemTemplate>
                                      <ItemStyle Width="150px" />
                                  </asp:TemplateField>
  ...
  JQuery sample:
  
  

  $("table[id*=GridView1] span[id*=LastDeliveryDate]").live('mouseover', function () {
                  //debugger
                  var VendorID = $(this).closest("tr").find("span[id*=VendorNo]").text();
                  var ItemID = $(this).closest("tr").find("input[type=hidden][id*=itemID]").val();
                  $.ajax({
                      type: "POST",
                      contentType: "application/json; charset=utf-8",
                      url: "VendorRequest.aspx/getLastRequest",
                      data: "{'VendorID': '" + VendorID + "','ItemID': '" + ItemID + "'}",
                      dataType: "json",
                      success: function (data) {
                          //debugger
                          $("#tooltip999").html(data.d);
                          $("#tooltip999").show();
                      }
                  });
              });
              $('table[id*=GridView1] span[id*=LastDeliveryDate]').live('mouseout', function () {
                  //debugger
                  $("#tooltip999").html("");
                  $("#tooltip999").hide();
              });
  ...
  CSS:
  
  

  .tooltip999
  {
      background: url(Images/white_arrow.png) repeat scroll 0 0 transparent;
      color: #e62424;
      display: none;
      font-size: 16px;
      text-align: center;
      height: 70px;
      padding: 25px;
      width: 160px;
      z-index: 11;
  }

  Keep your friends close and your enemies even closer
• • Reply
  

  cenk1536

  Contributor

  2503 Points

  2119 Posts

  Re: JQuery mouse over Question?

  Sep 30, 2011 12:13 PM|LINK

  .tooltip999
  {
      position: absolute;
  
  and in JQuery:

  success: function (data) {
                          //debugger
                          var pos = $("table[id*=GridView1] span[id*=LastDeliveryDate]").position();
                          $("#tooltip999").css({ "left": pos.left - 70, "top": pos.top - 90 })
  
  makes the tooltip pops up over the grid but not exactly the same point which mouse overed.

  Keep your friends close and your enemies even closer