Диаграмма внутри всплывающей подсказки qtip?

Я пытаюсь включить диаграмму внутри всплывающей подсказки qtip, но диаграмма не отображается в подсказке. Я присвоил области диаграмм подсказки свой собственный идентификатор, но сюжет не отображается в этой области.Диаграмма внутри всплывающей подсказки qtip?

В переполнении стека есть earlier posting, который касается той же проблемы, но решение не предоставляет достаточно подробностей для меня, чтобы применить его правильно. Аналогично на qtip help forum.

Я сделал скрипку, демонстрирующую свою проблему. Существует обычная всплывающая подсказка, а затем всплывающая подсказка, которая должна содержать диаграмму (но это не так).

Fiddle here

Я также разместить соответствующий код:

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

});

Просьба сообщить, как решить эту проблему.

источник

2014-11-10 gellati

Сначала вы создаете элемент, а затем захватываете его, чтобы показать его во всплывающей подсказке. Если вы скопируете приведенный ниже код в 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') 

});

источник

2014-11-10 14:57:56 Bas

Большое спасибо за исправление этого! – gellati

Нет thx, люблю помогать – Bas

Диаграмма внутри всплывающей подсказки qtip?

ответ

Смежные вопросы