爲什麼此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