Question

我正在尝试在qtip工具提示中包含图表，但图表未显示在工具提示中。我已将工具提示图表区域赋予其自己的ID，但该图表不会出现在该区域中。

Stack Overflow上有一个earlier posting来解决同样的问题，但是解决方案没有为我提供足够的细节来正确应用它。同样在qtip help forum。

我做了一个小提示来证明我的问题。有一个正常的工具提示，然后是一个工具提示，它应该包含图表（但不包含）。

我还会发布相关代码：

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')  

});

qtip工具提示中的图表？

1 个答案: