2012-01-18 3 views
1
$('.selector').qtip({ 
    content: { 
     text: function(api) { 
     return $(this).children('.tip').clone(); 
     } 
    }, 
    style: { 
     classes: 'ui-tooltip-rounded', 
     width: 210 
    }, 
    position: { 
     my: 'bottom center', 
     at: 'bottom center', 
     viewport: $(window) 
    }, 
    hide: { 
     fixed: true, 
     delay: 500 
    }, 
    events: { 
     show: function(event, api) { 
     $('.selector').css('border', '1px solid black'); 
     } 
    } 

}); 

나는 qtip이 플러그인을 사용하고 있지만 특정 선택을 변경하려면 ('이') 대신 모든 선택기.qtip2 : 변화 '이'선택

위의 코드는 페이지의 모든 "팁"아이콘 주위에 검은 색 경계선을 그립니다 ... 특정 "팁"그래픽 ('.selector')을 참조하는 방법이 있습니까?

+0

특정 팁 그래픽을 대상으로하는 CSS 규칙 대신 테두리 스타일을 설정하는 이유가 있습니까? –

+0

국경 부호는 나가 맞은 선택자를 얻고 있는지보기 위하여 임시적이다 ... 나가 작동 할 것이라는 점을 알 때 나는 종류를 추가하거나 제거 할 것이다. 덕분에 – redconservatory

답변

1

events.show 콜백에 전달 된 api 개체를 살펴보십시오. 매개 변수 이름을 사용하면 api.elements.target에 요소 (qTip이 표시됨)가 있습니다. 그런 다음 요소를 검사하여 특정 스타일을 적용할지 여부를 결정할 수 있습니다.
더 많은 관련 요소는 API에서 사용할 수 있습니다.

다른 옵션은 사용자 정의 스타일을 제외한 모든 요소에 대해 qTip 플러그인을 적용하는 것입니다. 그런 다음 사용자 정의 스타일의 qTip 만있는 요소에 대한 옵션이 변경된 다른 시간.

업데이트 : Troy Barlow가 제안한 요소를 참고하면 그의 제안이 원래 제안 된 데이터 소스의 더 나은 선택 일 수 있습니다.

+0

! 이것은 많은 도움이됩니다 ... originalEvent를 originalEvent에서 가져올 수 있는지 몰랐습니다. – redconservatory

3

show 이벤트에서 현재 qTip을 움켜 잡고 스타일을 적용하십시오. 다음을 사용하여 액세스 할 수 있습니다.