1. 首页
  2. 问答
  3. 如何在div内容中应用qTip？

如何在div内容中应用qTip？

2011-11-02 74 views
0

如何在qTip中的一个工具提示容器中获得“Tooltiptitle”和“Tooltiptext”？当鼠标移出时，工具提示会在qTip中显示tooltiptitle和tooltiptext，当鼠标移过新的span时，新的工具提示和tooltiptext会相应改变。请指导如何做到这一点？如何在div内容中应用qTip？

<script type="text/javascript" src="js/jquery.qtip.js"></script> 
<body> 
<table> 
    <tr class="row2"> 
    <td class="col1"> 
     <div class=""><span class="">Brad Pitt</span></div> 
     <div class="tooltiptitle">Brad Pitt</div> 
     <div class="tooltiptext">Angelina Jolie's husband. Father of six, husband of one. </div> 
    </td> 
    <td class="col2"> 
     <div class=""><span class="">Jennifer Aniston</span></div> 
     <div class="tooltiptitle">Jennifer Aniston</div> 
     <div class="tooltiptext">Brad Pitt's Ex-Wife.</div> 
    </td> 
</tr> 
</table> 
</body>

来源

2011-11-02 Modular

回答

5

我会去它像这样：

<head> 
    <title></title> 
    <style type="text/css"> 
     .tip-content { display: none; } 
    </style> 
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
    <script src="jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

     // On DOM ready... 
     $(function() { 

      $('.tip').each(function() { 
       var tipContent = $(this).next('.tip-content').html(); 
       $(this).qtip({ 
        content: tipContent, 
        show: 'mouseover', 
        hide: 'mouseout' 
       }) 
      }); 

     }); 

    </script> 
</head> 
<body> 
    <table> 
     <tr class="row2"> 
      <td class="col1"> 
       <span class="tip">Brad Pitt</span> 
       <div class="tip-content"> 
        <div class="tooltiptitle"> 
         Brad Pitt</div> 
        <div class="tooltiptext"> 
         Angelina Jolie's husband. Father of six, husband of one. 
        </div> 
       </div> 
      </td> 
      <td class="col2"> 
       <span class="tip">Jennifer Aniston</span> 
       <div class="tip-content"> 
        <div class="tooltiptitle"> 
         Jennifer Aniston</div> 
        <div class="tooltiptext"> 
         Brad Pitt's Ex-Wife.</div> 
       </div> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

来源

2011-11-02 02:36:39

相关问题

 相关问题