Как применить qTip к содержимому div? - PullRequest
Новая
       5

Как применить qTip к содержимому div?

0 голосов
/ 02 ноября 2011

Как я могу получить "Tooltiptitle" и "Tooltiptext", оба в одном контейнере подсказок, в qTip? Когда мышь наведена, всплывающая подсказка будет отображать всплывающую подсказку и текст подсказки в 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>

Ответы [ 2 ]

5 голосов
/ 02 ноября 2011

Я бы сказал так: 

<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>
0 голосов
/ 02 ноября 2011

Глупый я! Ответ на их официальном сайте. http://craigsworks.com/projects/qtip2/demos/#ajax

...