动态 qtip 未加载 jquery 迷你图

Posted 2023-04-13

【中文标题】动态 qtip 未加载 jquery 迷你图

【英文标题】：Dynamic qtip not loading jquery sparkline graph

【发布时间】：2011-06-08 16:43:56

【问题描述】：

我将值存储在 JQuery.data 方法中，并且成功地将带有迷你图 (http://omnipotent.net/jquery.sparkline/) 的 div 放置在输入旁边。然后我想将这些迷你图放在输入的提示中。提示出现并且似乎调整为图表的大小，但提示是空的，什么都没有出现。

任何帮助将不胜感激。

谢谢，

罗伯

代码更新

我添加了 $.sparkline_display_visible()，图表现在部分显示。现在出现迷你图的下半部分。我尝试在 div 中添加填充或边距，但只显示图表的下半部分？

$("输入").each(函数()

var theinput = $(this); var newValue = $(theinput).data("数据")

if ( $(newValue).length ) var theclass= $(theinput).attr('class'); //alert(theclass + '=' + newValue.theValue );

theclass= 'rob_' + 类

var theplaceholder = $(theinput).after('' + newValue.theValue + ''); var myvalues = [newValue.theValue,thetotal]; $('.' + theclass ).sparkline(myvalues, type: 'pie', offset: '+90' ).attr('title', newValue.theValue + ' of ' + thetotal );

$(theplaceholder).qtip(    
prerender: true,                                
content: $('.' + theclass),
show:  ready: true ,
style:  name: 'cream', tip: true, padding: '10'               
);
$.sparkline_display_visible()  

$('canvas,span').css('overflow','visible');

$('[class^=qtip]').css('overflow','visible');

);

更新 在 Firebug 中，我发现迷你图的画布设置为溢出：隐藏，这是 FireFox 3.6x 的一个已知错误。

我更新了上面的代码，它在 Internet Explorer 中运行良好（棒极了 LOL）。 FireFox 有什么修复方法吗？

【参考方案1】：

当 qtip 可见时，你需要调用 $.sparkline_display_visible() 方法。尝试：

$('.' + theoriginalclass ).qtip(
   prerender: true,
   content: $('.' + theclass).html(),
   show:  ready: true ,
   style:  name: 'cream', tip: true,
   onShow: function()  $.sparkline_display_visible(); 
);

【讨论】：

您好 Gareth，尝试了您的建议，但没有成功。我什至在将带有迷你图的 qtip 附加到类之前添加了一个 setTimeout，但它仍然不起作用。嗯。

最后一个发邮件告诉我使用 qtip 的人没有使用 prerender：是的。 - 相反，他们有一个 onRender: function() $(...).sparkline();除了 onShow() 显示可见的东西之外，还在那里调用。不知道有没有帮助。