CODEWITHSUNDEEP
javascriptjquerycssqtip2
gellati
gellati

Reputation: 95

Chart inside qtip tooltip?

I am trying to include a chart inside a qtip tooltip, but the chart does not show up in the tooltip. I have given the tooltip charting area an id of its own, but the plot does not appear in that area.

There is an earlier posting on Stack Overflow which addresses the same issue, but the solution does not provide enough detail for me to apply it correctly. Likewise on the qtip help forum.

I made a fiddle demonstrating my problem. There is a normal tooltip and then a tooltip which is supposed to contain the chart (but doesn't).

Fiddle here

I'll also post the relevant code:

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}
}
});    

});

Please advise on how to solve this issue.

Upvotes: 0

Views: 140

Answers (1)

Bas
Bas

Reputation: 36

You create the element first then you grab it to show in the tooltip. If you copy the code below in jsfiddle it should work:

$('#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')  

});

Upvotes: 0

Related Questions