2012-03-27 2 views
0

asp.net/c# 웹 응용 프로그램에서 jQuery 스크립트를 작성하고 있습니다.jQuery를 통해 정보창 (도구 설명 또는 팝업) 표시

나는 이벤트 기능을 같이 가지고

function showInfo(event,label){ 
    switch (label) 
    { 
     case 'America': 
      //Show America's info 
      break; 
     case 'Europe': 
      //Show Europe's info 
      break; 
     case 'Africa': 
      //Show Europe's info 
      break; 
    } 
} 

가 나는 상자에 정보를 표시합니다. 정보 상자는 사진 및 표와 같은 기본 HTML 요소를 지원해야합니다. 이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

나는 qtip2을 사용하려고했지만 그 기능을 통해 툴팁을 표시하는 방법을 알지 못했습니다 (툴팁을 링크 할 요소가 없습니다).
내가 좋아할 때마다 전화 할 수있는 ShowTooltip()과 같은 기능이 필요합니다. 간단한 툴팁 플러그인 검색하는 경우

답변

2

이 작업을 수행 할 모든 요소를 ​​동일한 클래스에 제공 한 다음 on과 같은 on-hover 함수를 만듭니다.

$('body').on("hover", ".tooltipclass", hoveron, hoveroff); 

호버 켜기/끄기 기능을 만듭니다. 어떤 종류의 요소를 사용하여이 작업을 수행 할 수 있는지에 대한 방법이 많이 있으므로 요소를 미국 또는 유럽과 같은 다른 클래스 이름으로 제공 한 다음 $ (this) .hasClass를 사용하여 표시 할 툴팁을 확인하십시오 .

지금까지 툴팁을 표시하는 실제 기계가 이미 페이지에 숨겨진 툴팁을 가지고, 또는 AJAX 호출로 그들에 데려 다음 그들에게 마우스 위치에 따라 위치, http://docs.jquery.com/Tutorials:Mouse_Position

여기에서 볼 수에 관한 한

많은 사람들이 이미이 작업을 수행 했으므로 툴팁 플러그인을 찾아 볼 수 있습니다

0

, 당신은 질문하고 사용하기 간단로서 그것은 (다음과 IMG) html 코드를 지원하는이 jQuery Tooltip plugin

에 봐. 플러그인은 라이선스 MIT/GPL하에 있습니다.

희망 도움말.