Jquery : JQuery와 함께 툴팁을 사용하는 방법?

Question

div에 긴 JavaScript 코드가있는 간단한 툴팁이 있습니다.

나는 같은 간단한 방법입니다하려면 것

수있는 한 도움은 여기

는 일이 나는 것을 내 코드

<div onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" style="position:relative;">Tool 
    <div id="tt1DX1" class="toolTip_new pbc11_ttpos1_1Q_di" style="display: none;"> 
     <div class="tool_wrapper"> 
     <div class="tooltip_top_new"></div> 
     <div class="tooltip_middle_new"> 
      <div class="content"> 
      <p>Please holder actuall text</p> 
      <p>Please holder actuall text</p> 
      </div> 
      </div> 
     <div class="tooltip_bot_new2"></div> 
     </div> 
     </div> 
    </div> 

CSS

.tooltip_top_new{ 
    background:url(../images/n_tooltip_top.png) no-repeat; 
    height:9px; 
    width:212px; 
} 
.tooltip_middle_new{ 
    background:url(../images/n_tooltip_middle.png) no-repeat; 
    width:212px; 
} 
.tooltip_middle_new .content{ 
    padding:2px 13px 1px; 
} 
.tooltip_middle_new .content p{ 
    line-height: 1.3; 
    margin-bottom: 1em; 
    text-align: left; 
} 
.tooltip_bot_new2{ 
    background:url(../images/n_tooltip_bot2.png) no-repeat; 
    height:21px; 
    width:212px; 
} 



.Question_di{ 
    position:relative; 
} 
.pbc11_ttpos1_1Q_di { 
    border: 0 solid #FF0000; 
} 
.toolTip_new { 
    background: none repeat scroll 0 0 transparent; 
    color: #5C5C5C; 
    display: none; 
    font: 10px/12px Tahoma,Geneva,sans-serif; 
    left: -173px; 
    top: -90px; 
    position: absolute; 

    z-index: 1000; 
} 

제발 & 붙여 넣기 onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" 붙여 넣기해야합니다. 툴팁, 나는 그것을 피하고 싶습니다.

Answer 1

JQueryTools에는 코드의 큰 덩어리를 제거하는 툴팁 모듈이 포함되어 있습니다.

<div class="has-tooltip"> 
    <button class="huge red">You Know You Wanna...</button> 
    <div class="tooltip">Do NOT Press This Button.</div> 
</div> 

그리고 CSS에서 :

.has-tooltip .tooltip { 
    position: absolute; 
    display: none; 

    <style code to position (with margin-left and margin-top) 
    and make the tooltip box look how you want> 

} 

.has-tooltip:hover .tooltip { 
    display: block; 
} 

구글 "CSS

http://jquerytools.org/demos/tooltip/index.html

그것은이 라인을 따라 HTML과 CSS를 사용하여, 전혀 자바 스크립트 툴팁을 만들 수도 있습니다 툴팁 "을 통해 많은 예제를 볼 수 있습니다.