jquery를 사용하여 아이콘 위로 마우스를 가져 가면 간단한 텍스트 상자를 표시하는 방법

Question

입력란이 HTML로되어 있고 필드 옆에 도움말 아이콘 (?)이 있습니다. 아이콘 위로 마우스를 가져 가면 간단한 텍스트 메시지가 나타납니다. 마우스를 가져 가면 문자 메시지가 사라집니다. 012quares를 사용하여이 작업을 수행하는 방법은 무엇입니까?

작은 이미지 아이콘은 간단한 물음표라고 할 수 있습니다. 텍스트는 "상자에 이름을 입력하십시오."

Answer 1

당신이 아이콘에있는 동안 마우스로 텍스트를 여행 "툴팁"를 사용할 수 있습니다

,

는 좋은 예입니다 .

http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/

이것은 또한 좋은 예입니다, 당신은 비슷한 방법으로 마우스를 구현할 수 있습니다!

http://api.jquery.com/mouseover/

확인이 예도

http://jsfiddle.net/DLQsX/

Answer 2

즉시 DOM 요소를 만든 다음 대상 요소의 오프셋을 사용하여 고정시킵니다. mousein 이벤트에 요소 작성을 연결하고 대상 요소의 mouseout 이벤트에 대한 파기를 첨부 할 수 있습니다. JQuery와 hover event 참조

$('#myId').mouseenter(function(){ 
    $('body').append("<div id='hoveringTooltip' style='position:fixed;'></div>"); 
    $('#hoveringTooltip').html("MY TOOLTIP TEXT GOES HERE"); 
    $('#hoveringTooltip').css({ 
     "top" : $(this).offset().top + MYTOPOFFSET, 
     "left" : $(this).offset().left + MYLEFTOFFSET 
    }); 
}); 
$('#myId').mouseleave(function(){ 
    $('#hoveringTooltip').remove(); 
}); 

Answer 3

:

준비 기능에이 추가 또는 MYID 요소가 선언 된 후 스크립트 태그에 : 대상 페이지 요소를 가정

는

에 id MYID있다 . jjclarkson의 대답과 같은 링크에서

$("#help_icon").hover(function(){ 
    $("#msg_div").hide(); 
    $("#msg_div").show(); 
}); 

Answer 4

$("#help_icon").hover(
    function() { 
    $("#msg_div").show(); 
    }, 
    function() { 
    $("#msg_div").hide(); 
    } 
); 

여기