图表内qtip工具提示？

Question

我正在尝试将图表包含在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}
}
});    

});

请提供有关如何解决此问题的建议。

Answer 1

首先创建元素，然后抓取它以显示在工具提示中。 如果您在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')  

});