1. 홈
  2. 질의 응답
  3. qd 콘텐츠를 어떻게 적용합니까?

qd 콘텐츠를 어떻게 적용합니까?

2011-11-02 6 views
0

qtip에서 하나의 툴팁 컨테이너에 "Tooltiptitle"과 "Tooltiptext"를 어떻게 얻을 수 있습니까? 마우스가 끝나면 도구 설명에 qTip에 tooltiptitle과 tooltiptext가 표시됩니다. 새 도구 상자와 tooltiptext는 새 범위를 마우스로 이동할 때 그에 따라 변경됩니다. 어떻게하는지 조언 해주세요.qd 콘텐츠를 어떻게 적용합니까?

<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

관련 문제

 관련 문제