jQueryのツールチップ内のカスタムjQueryのスクロールバー

Question

私はnanoscroller.jsとtiptip.jsを使用していますが、私の質問では特定のライブラリがそれほど重要ではないかどうかはわかりませんが、

私はツールヒントを持っていますが、私は動作しているスクロールバーがあります。別々に使用する場合。

私の目標は、ツールチップ内で作業用のカスタムスクロールバーを使用することです。

HTML：

<a class="tooltip">Open tooltip</a> 

<div class="tooltip-html" style="display:none;"> 
    <div id="main-content" class="nano"> 
     <div class="Content"> 
      <div class="blue"> 
      </div> 
     </div> 
    </div> 
</div> 

JS：私は上記の約気づい

var tip_html = $('.tooltip-html').html(); 
$('.tooltip').tipTip({activation: 'click', maxWidth: "230px", defaultPosition: "bottom", keepAlive: true, content: tip_html }); 
$("#main-content.nano").nanoScroller(); 

まず最初：nanoscrollerはHTMLのみの最初のセットに適用されたこの構成では、ありませんツールチップ内にあるセット

それで、まずhtmlをつかんでツールチップに追加する前にスクロールバーを適用しました。これはツールチップにスクロールバーを適用しましたが、機能しませんでした。

ここではさまざまなアプローチを試してみました（一致するすべてのID、いつ呼び出すか、など）、私は間違いなく止まっています。どんな助けでも感謝しています！

Answer 1

これらのライブラリを使用していないと、私は、tiptipはDOMノードのコピーを作成し、nanoScrollerはそれが適用されているノードへの参照を保存すると考えています。

これらのふたつのふるまいは、あなたが見ているものを引き起こす可能性があります：$（＃mail-content.nano）は常に元のHTMLを指しています。そして、スクロールバーを追加した後にHTMLをコピーすると、元のノードをスクロールしようとしています。

したがって、tipTipの作成後にnanoScrollerを追加してみてください。この（未テスト）のようなもの：

var tip_html = $('.tooltip-html').html(); 
$('.tooltip').tipTip({ 
    activation: 'click', 
    maxWidth: "230px", 
    defaultPosition: "bottom", 
    keepAlive: true, 
    content: tip_html, 
    enter: function() { 
     $(this).find("div.nano").nanoScroller(); 
    } 
}); 

これは、新しいDOM要素にnanoScrollerを追加し、先端が開かれたときに実行だ機能を、追加するtipTipのenterプロパティを使用しています。