qtip工具提示中的图表

Chart inside qtip tooltip?

本文关键字：工具提示 qtip      更新时间：2023-09-26

我试图在qtip工具提示中包含一个图表，但该图表没有显示在工具提示中。我已经为工具提示绘图区域提供了自己的id，但绘图没有出现在该区域中。

之前有一篇关于Stack Overflow的文章解决了同样的问题，但该解决方案没有为我提供足够的细节来正确应用它。在qtip帮助论坛上也是如此。

我做了一把小提琴来演示我的问题。有一个普通的工具提示，然后是一个工具提示，它应该包含图表（但没有）。

在这里摆弄

我还将发布相关代码：

HTML:

<body>
Hello
<div id="hello1"></div>
<br style="margin-bottom: 50px;" />
<div id="hello2">Hello again!</div>
<br style="margin-bottom: 30px;" />
 </body>

CSS：

#hello1,
#hello2{
height: 100px;
width: 200px;
}
#tooltipchart{
height: 100px;
width: 200px;
}

Javascript：

$('#hello1').qtip({ // Grab some elements to apply the tooltip to
content: { text: 'Here is a chart!'},
position: { target: 'mouse' }
})
$('#hello2').qtip({ 
content: { text: "No chart inside the tooltip :(" },
position: { target: 'mouse' },
api:{onShow: function(){return tooltipcontent();}}
})
function tooltipcontent(){
var div = document.createElement("div");
div.setAttribute("id", "tooltipchart");
div.setAttribute("height", "100px");
div.setAttribute("width", "100px");
return div;
}
$(document).ready(function(){
var plot1 = $.jqplot('hello1', [
[[4,1], [7,2], [1,3], [2,4]]], {  
seriesDefaults: {
pointLabels: { show: true}
}
});
var plot2 = $.jqplot('tooltipchart', [
[[4,1], [7,2], [1,3], [2,4]]], {  
seriesDefaults: {
pointLabels: { show: true}
}
});    
});

请就如何解决此问题提供建议。

首先创建元素，然后抓取它以显示在工具提示中。如果你在jsfiddle中复制下面的代码，它应该可以工作：

$('#hello1').qtip({ // Grab some elements to apply the tooltip to
    content: { text: 'Here is a chart!'},
    position: { target: 'mouse' }
})
$('#hello2').qtip({ 
    content: function(){return tooltipcontent();},
    position: { target: 'mouse' },
    api:{onShow: function(){return tooltipcontent();}}
})
function tooltipcontent(){
 return $("#tooltipchart").css('display','');
}
$(document).ready(function(){
 var plot1 = $.jqplot('hello1', [
        [[4,1], [7,2], [1,3], [2,4]]], {  
        seriesDefaults: {
            pointLabels: { show: true}
            }
    });
 var div = document.createElement("div");
 div.setAttribute("id", "tooltipchart");
 div.setAttribute("height", "100px");
 div.setAttribute("width", "100px");
 $('body').append(div);
 var plot2 = $.jqplot('tooltipchart', [
        [[4,1], [7,2], [1,3], [2,4]]], {  
        seriesDefaults: {
            pointLabels: { show: true}
            }
    });  
 $("#tooltipchart").css('display','none')  
});
相关文章：