css - JQuery tooltip jumps rows in gridview when hovering over a tooltip cell - how to prevent? -
in following asp.net sample webform app (markup , code behind follows below along sample data) apply jquery tooltip, using webmethod, 1 cell in gridview 5 columns -- requirement "no paging" on gridview want scrolling gridview. datasource in sample contains 26 rows z. set height of div contains gridview height 300px scrollbar illustrate problem. tooltip works ok except 1) when hovering on cell tooltip (column 1 in sample) row expands , cells row pushed right of column 1 cell -- phantom cell added after cell(1). , ... 2) if scroll towards bottom of gridview -- towards zzz row (where aaa thru fff rows not visible) when hover on tooltip cell in column 1 gridview rows jump j row.
how can prevent happening -- jumping of rows? possible prevent cells being pushed right when hovering on tooltip cell? prevent phantom cell appearing? how remedy this/these problems? jquery issue or css issue?
--markup here
<%@ 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> --code behind
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; } } }
well, found 1 workaround:
$(this).tooltip({ container: 'body', title: $(this).addclass("colr-tooltip"), title: titel, html: true, placement: "right" }); i added -- container: 'body' -- $(this).tooltip({.......}). 1 side effect though, lose css formatting of $(this).addclass("colr-tooltip"), experiment placement of -- container: 'body' -- , see if makes difference. other suggestions still appreciated - how keep css formatting , keep stabilization -- container: 'body' -- appears provide. searches suggest boostrap may culprit in instability.
Comments
Post a Comment