1. 首頁
  2. 問答
  3. 如何在div內容中應用qTip？

如何在div內容中應用qTip？

2011-11-02 82 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

相關問題

 相關問題