2016-12-08 22 views
2

jQuery UI Tooltipsを使用して、タイトル属性以外の特定の属性に基づいてDivコンテナを動的に表示する方法は?jQuery UI Tooltipはtitle属性の代わりにdivを表示する必要があります

フィドルサンプルは、私の問題が表示されます:

Example Fiddle

私もtitle属性を持つことができます別のリンクを、持っている、と指定された属性が存在する場合、ツールチップが値を読み、必要があります貢献する部門を示す

サンプル:

<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はこのサンプルのTextのみを含みますが、現実にははるかに複雑です)。

+1

を確認してください。https://jqueryui.com/tooltip/#custom-content –

+0

Thx、私はこれを見ましたが、特定の情報を使って解決策を構築できませんでした: – SchweizerSchoggi

答えて

2

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

・ホープこのヘルプを。

関連する問題