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의 속성을 이용한다.