각 스택 오버 플로우 태그 위에 마우스가있을 경우 자체 아래에 정보 상자가 표시됩니다. 마우스가 태그 위에 있거나 정보 상자 위에있는 한 계속 볼 수 있습니다. 태그 또는 정보 상자에서 마우스를 움직이면 정보 상자가 사라집니다.Stack Overflow 태그 - 마우스 위로 정보를 표시하는 방법은 무엇입니까?
JQuery 나 JS를 사용하여 어떻게하면됩니까? 서버에서 태그 정보를 가져 오는 과정도 설명하십시오.
갱신 :
중요한 것은 그것이 툴팁이라고 생각하기 힘들 것입니다. 태그가 표면에서 마우스 포인터를 잃을 때 일반적으로 툴팁이 사라지기 때문입니다. 그러나 Stack Overflow 툴팁은 정보 영역 위로 마우스를 움직여도 여전히 유지됩니다. 그래서이 문제를 명확히하기 위해이 질문을 제기했습니다. 이러한 유형의 사용자 정의는 어떻게 수행됩니까?
jQuery 용 툴팁 플러그인을 살펴보십시오. 툴팁 용 HTML 수신에 관해서는 jQuery 문서의 간단한 $.ajax 예제를 살펴보십시오.
도구 설명
나는 이런 식으로 Tooltip을 권하고 싶습니다.
더 구체적으로 말하면 내가 어떻게 당신에게 줄 수 있는지는 그것이 어떻게 작동하는지에 대한 일반적인 생각입니다.
mouseover는 해당 태그에 대해 SO 데이터베이스를 쿼리하는 AJAX 요청을 트리거합니다 (포인터가 짧은 시간 동안 태그 위에 올 때까지 발사를 유지하기 위해 짧은 타이머 카운트 다운 이후에 발생합니다). if는 DOM에 직접 삽입되는 HTML 조각이나 DOM에 삽입되는 요소를 채우는 데 사용되는 XML 또는 JSON 인코딩 된 데이터 블록을 반환합니다. mouseout 이벤트는 DOM에서 요소를 제거합니다. 나는 AJAX 응답이 동일한 데이터가 반복적으로 요청되지 않도록 관리하는 자바 스크립트에 의해 메모리 캐시에 저장된다고 생각한다.
에서 정보 상자를 표시하려면 마우스를 두었을 DOM 이벤트에 이벤트 리스너를 추가합니다. 이벤트 리스너를 mouseout 이벤트에 추가하여 정보 상자를 숨 깁니다. 자세한 내용은 Mouse event types을 참조하십시오. 정보 상자에 표시하려는 정보를 XMLHttpRequest을 통해 가져옵니다.