将鼠标悬停在工具提示单元格上时，JQuery工具提示会在gridview中跳转行-如何防止？

Question

在下面的asp.net示例Webform应用程序中（下面是后面的标记和代码以及示例数据），我使用webmethod将一个JQuery工具提示应用于具有5列的gridview中的一个单元格-要求是“无分页”在gridview上，他们想要滚动gridview。 示例中的数据源包含从A到Z的26行。我将div的高度（包含gridview）设置为300px的高度，以便获得滚动条来说明我的问题。 工具提示可以正常工作，除了1）将鼠标悬停在工具提示的单元格上（我的示例中的第1列）时，行会展开，并且该行的单元格会被推到第1列单元格的右侧-就像在添加了幻像单元格单元格（1）。 ... 2）如果将鼠标悬停在第1列的工具提示单元格上，则滚动到gridview的底部-滚动到zzz行（其中aaa到fff行不可见），gridview行会跳回到第j行。

如何防止这种情况发生-行跳？ 将鼠标悬停在工具提示单元上方时，是否可以防止将单元推到右侧？ 防止幻影细胞出现？ 如何解决这个/这些问题？ 这是JQuery问题还是CSS问题？

-在这里标记

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication3.WebForm3" %>

  <!DOCTYPE html>

  <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title>WebForm3</title>

      <script src="/Scripts/jquery-1.10.2.js"></script>
      <link rel="stylesheet" href="/Content/bootstrap.min.css" />
      <script src="/Scripts/bootstrap.min.js"></script> 

      <script type="text/javascript">
        $(function () {
          $.ajax({
            type: "POST",
            url: "WebForm3.aspx/GetMyStuff",
            contentType: "application/json;charset=utf-8",
            data: {},
            dataType: "json",
            success: function (data) {                        
              $('[id*=GridViewA] tr').each(function (n) {
                $(this).find("td:eq(1)").each(function () {                                
                  var titel = typeof (data.d[n - 1]) === 'undefined' ? "" : data.d[n - 1].firstN + "<br />" + data.d[n - 1].lastN;        
                  $(this).tooltip({ title: $(this).addClass("colr-tooltip"), title: titel, html: true, placement: "bottom" });
                });
              });
            },
            error: function () { alert("error"); }
          });
        });

      </script>

      <style type="text/css">
        .colr-tooltip + .tooltip > .tooltip-inner
        {
          width: 200px;
          max-width: 600px !important;
          background-color: gainsboro;
          color: blue;
          text-align: left;
          opacity: 1;
          filter: alpha(opacity=100);  
          -moz-box-shadow: 0 0 5px 2px black;
          -webkit-box-shadow: 0 0 5px 2px black;
          box-shadow: 0 0 5px 2px black;   
        }
      </style>
    </head>

    <body>
      <form id="form1" runat="server">
        <div style="height:300px; width:310px; overflow:auto;">                
          <asp:GridView ID="GridViewA" runat="server" AutoGenerateColumns="false" ShowFooter="true" AllowPaging="false" >
            <Columns>
              <asp:BoundField DataField="itm0" HeaderText="itm0A" />                
              <asp:BoundField DataField="itm1" HeaderText="itm1B" />
              <asp:BoundField DataField="itm2" HeaderText="itm2C" />
              <asp:BoundField DataField="itm3" HeaderText="itm3D" />  
              <asp:BoundField DataField="itm4" HeaderText="itm4E" />  
            </Columns>
          </asp:GridView>
        </div>
      </form>
    </body>
  </html>

-后面的代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication3
{
    public partial class WebForm3 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                List<stuffA> lstA = new List<stuffA>()
               {
                    new stuffA {itm0="a1", itm1="aaa", itm2="apple", itm3="anna smith", itm4 = "aaa"},
                    new stuffA{itm0="b1", itm1 = "bbb", itm2="banana", itm3="betty white", itm4 = "bbb"},
                    new stuffA{itm0="c1", itm1 = "ccc", itm2="cow", itm3="charlie sheen", itm4 = "ccc"},
                    new stuffA{itm0="d1", itm1 = "ddd", itm2="donut", itm3="danielle monet", itm4 = "ddd"},
                    new stuffA{itm0="e1", itm1 = "eee", itm2="egret", itm3="emelio esteban", itm4 = "eee"},
                    new stuffA {itm0="f1", itm1="fff", itm2="fapple", itm3="fanna smith", itm4 = "fff"},
                    new stuffA{itm0="g1", itm1 = "ggg", itm2="gbanana", itm3="gbetty white", itm4 = "ggg"},
                    new stuffA{itm0="h1", itm1 = "hhh", itm2="hcow", itm3="hcharlie sheen", itm4 = "hhh"},
                    new stuffA{itm0="i1", itm1 = "iii", itm2="idonut", itm3="idanielle monet", itm4 = "iii"},
                    new stuffA{itm0="j1", itm1 = "jjj", itm2="jegret", itm3="jemelio esteban", itm4 = "jjj"},
                    new stuffA {itm0="k1", itm1="kkk", itm2="kapple", itm3="kanna smith", itm4 = "kkk"},
                    new stuffA{itm0="l1", itm1 = "lll", itm2="lbanana", itm3="lbetty white", itm4 = "lll"},
                    new stuffA{itm0="m1", itm1 = "mmm", itm2="mcow", itm3="mcharlie sheen", itm4 = "mmm"},
                    new stuffA{itm0="n1", itm1 = "nnn", itm2="ndonut", itm3="ndanielle monet", itm4 = "nnn"},
                    new stuffA{itm0="o1", itm1 = "ooo", itm2="oegret", itm3="oemelio esteban", itm4 = "ooo"},
                    new stuffA {itm0="p1", itm1="ppp", itm2="papple", itm3="panna smith", itm4 = "ppp"},
                    new stuffA{itm0="q1", itm1 = "qqq", itm2="qbanana", itm3="qbetty white", itm4 = "qqq"},
                    new stuffA{itm0="r1", itm1 = "rrr", itm2="rcow", itm3="rcharlie sheen", itm4 = "rrr"},
                    new stuffA{itm0="s1", itm1 = "sss", itm2="sdonut", itm3="sdanielle monet", itm4 = "sss"},
                    new stuffA{itm0="t1", itm1 = "ttt", itm2="tegret", itm3="temelio esteban", itm4 = "ttt"},
                    new stuffA{itm0="u1", itm1 = "uuu", itm2="uegret", itm3="uemelio esteban", itm4 = "uuu"},
                    new stuffA {itm0="v1", itm1="vvv", itm2="vapple", itm3="vanna smith", itm4 = "vvv"},
                    new stuffA{itm0="w1", itm1 = "www", itm2="wbanana", itm3="wbetty white", itm4 = "www"},
                    new stuffA{itm0="x1", itm1 = "xxx", itm2="xcow", itm3="xcharlie sheen", itm4 = "xxx"},
                    new stuffA{itm0="y1", itm1 = "yyy", itm2="ydonut", itm3="ydanielle monet", itm4 = "yyy"},
                    new stuffA{itm0="z1", itm1 = "zzz", itm2="zegret", itm3="zemelio esteban", itm4 = "zzz"}
               };

                GridViewA.DataSource = lstA;
                GridViewA.DataBind();
            }
        }

        [System.Web.Services.WebMethod]
        public static stuffB[] GetMyStuff() 
        {
            List<stuffB> Detail = new List<stuffB> {                
                new stuffB{firstN="alfred", lastN="Newman"},
                new stuffB{firstN="betty", lastN="white"},
                new stuffB{firstN="connie", lastN="stevens"},
                new stuffB{firstN="davy", lastN="jones"},
                new stuffB{firstN="efron", lastN="smith"},
                new stuffB{firstN="fff", lastN="Newman"},
                new stuffB{firstN="ggg", lastN="white"},
                new stuffB{firstN="hhh", lastN="stevens"},
                new stuffB{firstN="iii", lastN="jones"},
                new stuffB{firstN="jjj", lastN="smith"},
                new stuffB{firstN="kkk", lastN="Newman"},
                new stuffB{firstN="lll", lastN="white"},
                new stuffB{firstN="mmm", lastN="stevens"},
                new stuffB{firstN="nnn", lastN="jones"},
                new stuffB{firstN="ooo", lastN="smith"},
                new stuffB{firstN="ppp", lastN="Newman"},
                new stuffB{firstN="qqq", lastN="white"},
                new stuffB{firstN="rrr", lastN="stevens"},
                new stuffB{firstN="sss", lastN="jones"},
                new stuffB{firstN="ttt", lastN="smith"},
                new stuffB{firstN="uuu", lastN="Newman"},
                new stuffB{firstN="vvv", lastN="white"},
                new stuffB{firstN="www", lastN="stevens"},
                new stuffB{firstN="xxx", lastN="jones"},
                new stuffB{firstN="yyy", lastN="smith"},
                new stuffB{firstN="zzz", lastN="smith"}
            };
            return Detail.ToArray();
        }
    }

    public class stuffA
    {
        public string itm0 { get; set; }        
        public string itm1 { get; set; }
        public string itm2 { get; set; }
        public string itm3 { get; set; }
        public string itm4 { get; set; }
    }

    public class stuffB
    {
        public string firstN { get; set; }
        public string lastN { get; set; }
    }
}

Answer 1

好吧，我找到了一种解决方法：

$(this).tooltip({ container: 'body', title: $(this).addClass("colr-tooltip"), title: titel, html: true, placement: "right" });

我在$（this）.tooltip（{.......}）中添加了container：'body'。 但是，一个副作用是，我丢失了$（this）.addClass（“ colr-tooltip”）的CSS格式，我将尝试放置-container：'body'-并查看是否使区别。 还有其他建议值得赞赏-我如何才能保持CSS格式并保持容器似乎提供的稳定性。 我的搜索表明，Boostrap可能是不稳定的罪魁祸首。

Answer 2

事实证明，我可以嵌入具有以下所有属性的html表-有点像内联CSS

var titel = typeof (data.d[n - 1]) === 'undefined' ? "" : "<table  style='color:blue;background-color:lightgreen;width:100px;text-align:left;'><tr><td>" + data.d[n - 1].firstN + "</td></tr><tr><td>" + data.d[n - 1].lastN + "</td></tr></table>";

Answer 3

（为了后代）我发现了另一种解决工具提示跳跃问题的方法，并且仍然可以使用我原来的CSS类

/$(this).tooltip({ 'data-container': 'body', title: $(this).addClass("colr-tooltip"), title: titel, html: true, placement: "right" });

而不是容器：“ body”，我将其替换为“ data-container”：“ body”

请注意，对于此版本，我必须将“数据容器”用单引号引起来。