为什么此qtip2在第二次点击时显示空白内容？

Question

我有一个qtip2工具提示，它正在加载下一个元素的静态HTML内容。工具提示在第一次悬停时成功加载内容。在第二次悬停时，工具提示的内容面板为空。

http://jsfiddle.net/adamtsiopani/m4hohp4e/

HTML

<a href="#" class="tooltip" title="My Title">hover here</a> 
<div class="tooltip-content"> 
    <!-- some content --> 
</div> 

CSS

.tooltip-content { 
    display: none; 
} 

的JavaScript

$('a.tooltip').qtip({ 
    content: { 
     title: { 
      text: function(event, api) { 
       return $(api.target).attr('title'); 
      } 
     }, 
     text: function(event, api) { 
      return $(api.target).next('.tooltip-content'); 
     } 
    } 
}); 

http://jsfiddle.net/adamtsiopani/m4hohp4e/

UPDATE

我明白现在为什么会这样 - 第一悬停时，.tooltip-content元素被移动到工具提示，然后放置在DOM结束。所以它不再是'下一个'元素......但我不明白如何解决这个问题？

Answer 1

，而不是传递实际.tooltip-content DOM节点/ jQuery的元素qtip对弹出窗口的文本：

text: function(event, api) { 
    return $(api.target).next('.tooltip-content'); 
} 

你可以通过它来代替html：

个

text: function(event, api) { 
    return $(api.target).next('.tooltip-content').html(); 
} 

Fiddle

Answer 2

你可以试试这个：

$('a.tooltip').qtip({ 
    content: { 
     title: { 
      text: function(event, api) { 
       return $(api.target).attr('title'); 
      } 
     }, 
     text: function(event, api) { 
      return $(api.target).parent().find('.tooltip-content') 
     } 
    } 
}); 

fiddle

$(api.target).next('.tooltip-content'); 
//qtip changes DOM after you first hover on the element, 
//so you have to use different selector