플러그인없이 jquery로 툴팁을 만드는 방법은 무엇입니까?

몇 년 동안 몇 가지 툴팁 플러그인을 사용했지만, 내 자신의 글을 쓸 시간이되었다고 생각합니다. 간단히 말해, 나는 모든 옵션을 가지고있는 플러그인을 찾고 있지 않다. 내가 보았을 때 나타나는 모든 툴팁이 어떻게 보이고 행동하는지 알고 있기 때문이다. 대부분의 플러그인에는 사용할 수있는 애니메이션 및 위치의 범위가 있으며, 나는 당신의 도움으로 창조하고자하는 가벼운 것에 대해 과도하다고 생각합니다. :)플러그인없이 jquery로 툴팁을 만드는 방법은 무엇입니까?

기본적으로 호버의 title 속성을 사용하여 끌어 올리는 요소의 바로 위에 나타나고 가운데에 나타나는 툴팁.

표시 될 div를 채우는 방법을 알고 있지만 작동 시키려고 노력하는 것은 해당 div 바로 위에 요소를 배치하는 방법입니다.

최소 코드를 사용하는 것이 가장 이상적입니다. 위의 코드는 단지 도구 설명을 작성하지 않는 것입니다 물론

<html> 
<head> 

<style type="text/css"> 

    #myToolTip { display: none; } 

</style>

<script type="text/javascript"> 

$(document).ready(function() { 

    $('.hoverAble').hover(function(){ 

     var tip = $(this).attr('title'); 

     $('#myToolTip').html(tip).fadeIn(); 

    }, function() { 

     $('#myToolTip').fadeOut(); 

    } 

}); 
</script> 
</head> 
<body> 

<div id="myToolTip"></div> 

<div class="hoverAble" title="I am good at code"></div> 

</body> 
</html>

가 떴다 요소를 기준으로 배치 할 : 내 논리는이 (의사 코드) 같은 것을 말한다. 그게 내 이해가 부족합니다. 도울 수 있니?

편집 : 설명 : 명확히 말하면, 마우스로 움직이는 툴팁을 원하지 않습니다

출처

2009-08-10 willdanceforfun

버그 준비 (함수() {})가있다; 대괄호가 없습니다! 그 존을 위해서 –

tx! – willdanceforfun

는, jQuery를의 다양한 CSS functions에서 대부분 offset() 어쩌면 height()을 살펴 보자 :

이 귀하는 clientX와 clientY로 등록

는 이벤트 객체에 대해 다음 밖으로

확인 도움이 될 것입니다 .

// pseudocode, assuming #tooltip has position: absolute 
// do something similar with the left offset as well 
$('#tooltip').css({ top : $('#link').offset().top + 10 + 'px' });

이렇게하면 내 생각에 생각하는 링크 위에 정적으로 또는 그 근처에 툴팁이 표시됩니다. 도구 설명을 마우스로 움직이려면 mousemove 이벤트에서 위치를 동적으로 업데이트해야합니다.

출처

2009-08-10 12:41:07 deceze

나는 그것이 이것이라고 생각한다. 거기에 CSS 기능을 살펴 보니 분명히 보인다! – willdanceforfun

상단이 정상적으로 작동하지만 내 '왼쪽'속성이 아무 것도하지 않는 것 같습니다 : $ ('# tooltip') .css ({top : $ (this) .offset() .pop -50 + 'px ', 왼쪽 : $ (this) .offset()}); - 어떤 아이디어? – willdanceforfun

'offset()'은 "top"과 "left"속성을 가진 객체를 반환하므로'offset(). left'을 사용해야합니다. "px"도 첨부 했습니까? – deceze

특정 코드 예제가 없으면 이벤트 객체의 내용을 볼 수 있습니다 (onmouseover 이벤트에서이 작업을 수행 중이라고 가정합니다).

http://www.javascriptkit.com/jsref/event.shtml

출처

2009-08-10 12:40:01

나는 이것이 당신을 도울 수 있다고 생각합니다.

<html> 
<head> 
<style type="text/css"> 
    #myToolTip { display: none;position:absolute; } 
</style> 
<script type="text/javascript" src='js/jquery.js'></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 

    $('.hoverAble').hover(function(e){ 
     var left = mouseX(e); 
     var top = mouseY(e); 
     var tip = $(this).attr('title'); 

     $('#myToolTip').css('top',top); 
     $('#myToolTip').css('left',left); 
     $('#myToolTip').html(tip).fadeIn(); 


    }, function() { 

     $('#myToolTip').fadeOut(); 

    }) 

});

마우스 위치 :

function mouseX(evt) { 
if (evt.pageX) return evt.pageX; 
else if (evt.clientX) 
    return evt.clientX + (document.documentElement.scrollLeft ? 
    document.documentElement.scrollLeft : 
    document.body.scrollLeft); 
else return null; 
} 

function mouseY(evt) { 
if (evt.pageY) return evt.pageY; 
else if (evt.clientY) 
    return evt.clientY + (document.documentElement.scrollTop ? 
    document.documentElement.scrollTop : 
    document.body.scrollTop); 
else return null; 
} 
</script> 
</head>

HTML :이 간단한 툴팁 나를 위해 노력하고 있습니다

<body> 

<div id="myToolTip"></div> 

<div class="hoverAble" title="I am good at code">hi catch me</div> 

</body> 
</html>

출처

2009-08-10 12:52:12

미안하지만 좀 더 구체적이어야합니다. 팁을 마우스로 옮기고 싶지 않습니다. 현재 요소 위에 조금 있습니다. – willdanceforfun

<div title="This is tooltip">Hover Me</div>

. 유창한 스타일을 만들기 위해 모든 수업을 추가 할 수 있습니다.

출처

2009-08-10 13:18:45 NAVEED

내장 된 jQuery.UI 툴팁 중 가장 사용하기 쉬운 툴 중 하나입니다.코드에서

$(document).tooltip();

및 HTML에서 "제목"태그의 모든 툴팁에 설정

...

<div class="juppiduppi" title="Here is a tooltip, just for you. ">Over here with the mouse... </div>

출처

2013-10-06 21:43:34 huncyrus

플러그인없이 jquery로 툴팁을 만드는 방법은 무엇입니까?

답변

관련 문제