jQuery qTip - 툴팁 내부에서 숨겨진 div에 연결

Question

클릭하면 라이트 박스 (nyroModal) 안의 숨겨진 div의 내용을 보여주는 툴팁 (qTip) 안에 링크를 배치하려고합니다. 툴팁에없는 일반 앵커 태그는 라이트 박스의 div 내용을 성공적으로 링크합니다.

코드 : http://jsbin.com/omafe/2/

, 메모장에 코드를 복사하여 HTML로 저장하고 파일을 열 필요가 있습니다. (jsbin은 외부 js 플러그인 파일을 불러 오지 않습니다.)

어떤 도움을 주시면 감사하겠습니다. 감사.

Answer 1

qTip은 'div.tipcontent'사본을 메모리 (변수)에 저장하는 것으로 보입니다.

div에서 "hidden"클래스를 제거하여이 사실을 발견했습니다. 이렇게하면 두 div가 있음을 알 수 있습니다. 하나는 페이지에 남아 있고 다른 하나는 메모리에서 qTip에 의해 사용됩니다.

해결책으로 qTip을 수정하여 $('a').nyroModal();을 메모리에서 렌더링하는 링크 노드에 적용해야 할 수 있습니다.

편집, 당신의 qtip 링크 라이트 효과를 추가 다음과 같이 qtip 초기화를 수정하려면 :

$('div.tooltip').qtip({ 
    content: $('div.tipcontent').html(), 
    position: { 
     corner: { 
     target: 'topRight', 
     tooltip: 'bottomRight' 
     } 
    }, 
    style: { 
     width: 150, 
     padding: 10, 
     background: 'silver', 
     color: 'black', 
     tip: 'bottomMiddle', 
    }, 
    hide: { 
     fixed: true 
    }, 
    api: { 
     onShow: function() { $('a').nyroModal(); } 
    } 
}); 

에서 onShow에 대한 API 호출을 유의하시기 바랍니다. 이렇게하면 페이지의 모든 링크에 nyroModal이 다시 적용되어 qtip에서 동적으로 생성 된 내용을 덮습니다. 아마도 qtip에 의해 생성 된 특정 링크로 jQuery 선택기의 범위를 좁히는보다 효율적인 방법이있을 수 있습니다.