Jquery: Wie verwende ich Tooltip mit JQuery?

Question

Ich habe eine einfache Tooltip, die lange JavaScript-Code in den Divs hat.

würde ich machen es so einfach Art und Weise ist

könnte jemand helfen, bitte

hier ist mein Code

<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; 
} 

das, was ich ist muss kopieren & einfügen onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" wo immer mit Die Tooltips möchte ich vermeiden.

Answer 1

JQueryTools enthält ein Tooltip-Modul, das einen großen Teil Ihres Codes entfernt.

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

Es ist auch möglich, Tooltips ohne JavaScript überhaupt zu schaffen, mit Hilfe von HTML und CSS in diese Richtung:

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

Und in 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“ Tooltips "um viele Beispiele zu sehen.