Jquery：JQueryでツールチップを使用する方法？

Question

divsに長い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; 
} 

Googleの「CSS

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

これは、これらの線に沿ってHTMLとCSSを使用して、まったくJavaScriptでツールチップを作成することも可能です多くの例を見るために「ツールチップ」を参照してください。