팝업에 마우스를 올리면 단어가

Question

asp.net C#을 사용하여 웹 사이트를 만들고 있는데 마우스로 특정 단어를 가리키면 바로 작은 창에 정보를 팝업하고 싶습니다. 내가 jquery를 사용해야한다는 것을 알고 있지만 정확히 어떻게 해야할지 모르겠다.

제안 사항을 알려주십시오.

Answer 1

당신이 찾고있는 것을 달성하는 데 도움이되는 많은 플러그인이 있습니다. 그러나이 기능을 직접 구현할 수도 있습니다. 플러그인 중 일부가 비슷한 코드를 사용하는 경우에도 놀랄 일이 아닙니다.

다음은 툴팁/팝업 플러그인 동작을 설명하기위한 시도입니다.

<span> 요소에서 원하는 단어를 감싸고 .hover 클래스로 지정할 수 있습니다.

<div> 
    This is some text with a <span class="hover">special</span> 
    word that has hovercraft capabilities. 
</div> 

귀하의 jQuery를 (ver 1.7+)는 다음과 같이 보일 것입니다 :

$(".hover").on('mouseenter',function(){ 
    // The popup must be shown here (mouse is over element). 
}).on('mouseleave',function(){ 
    // The popup must be hidden here (mouse has left element). 
}); 

내가 jQuery를의 큰 아직 때때로 잊어 버린 능력 "체인"라고 사용하고 있음을 여기에 추가해야합니다. on() 함수는 실제로 첨부 된 객체를 반환합니다. 이 경우 $(".hover") - 그 객체에 다른 함수를 호출하고 싶다면 끝에 다른 함수로 추가 할 수 있습니다. 이것의 또 다른 예는 다음과 같습니다
이

$("#myElement").text("An error has occured!").css("color","#FF0000");

코드 줄도 #myElement에 텍스트를 또한 붉은 색을 설정합니다. -

실제 팝업과 관련하여

나는 두 가지를 제안 :

1. 는 마크 업의 하단에있는 요소를 가지고 (마지막 그래서 가장 높은 인덱스를 작성 - 또는 수동으로 가장 높은 Z- 인덱스 설정)
2. 팝업을 트리거 할 것으로 예상되는 요소 바로 옆의 숨겨진 요소에 팝업을 넣을 수도 있습니다.

Answer 2

'도구 설명'과 비슷한 것 같습니다.

jQuery를 사용하는 솔루션은 다소 복잡하므로 외부 리소스로 안내 할 것입니다.

가능한 해결책 :

• ToolTip Plugin for jQuery
• Build a Better Tooltip with jQuery Awesomeness

스팬