JQuery: как использовать подсказку с JQuery?

Question

У меня есть простая подсказка с длинным кодом JavaScript в div.

Я хотел бы сделать это как простой способ

может любой помощи, пожалуйста,

вот мой код

<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 включает в себя модуль всплывающей подсказки, который избавится от большой части вашего кода.

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

Это также возможность создавать всплывающие подсказки, без JavaScript вообще, используя HTML и CSS вдоль этих линий:

<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 Подсказки ", чтобы увидеть множество примеров.