jQuery UI Tooltip должен показывать Div вместо атрибута title

Question

Как использовать подсказки JQuery UI для динамического отображения контейнеров Div на основе заданного атрибута, отличного от атрибута title?

Fiddle Образец покажет мою проблему:

Example Fiddle

У меня есть различные ссылки, которые могут иметь название атрибут, а также, если есть данный атрибут, подсказка должна прочитать значение и показать вклад Div.

Пример:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="toolTipHTML" data-ttcontent="help1_content" title="test 1">Help 1</span> 
 
<span class="toolTipHTML" data-ttcontent="help2_content" title="test 2">Help 2</span> 
 

 
<div class="help1_content"> 
 
    Text for Help 1 goes here! 
 
    <br>Lorem 
 
    <br>Ipsum 
 
</div> 
 

 
<div class="help2_content"> 
 
    Text for Help 1 goes here! 
 
    <br>Lorem 
 
    <br>Ipsum 
 
</div>

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

Answer 1

Updated fiddle.

Вы можете использовать content вариант для этой цели:

$('.toolTipHTML').tooltip({ 
    show: { duration: 0 }, 
    hide: { effect: "fade", duration: 100 }, 
    position: { my: "left top", at: "left bottom" }, 
    content: function() { 
    return $('.'+$(this).attr('data_ttcontent')+'_content').html(); 
    } 
}); 

Надежда эта помощь.