Question

如何在qTip的一个工具提示容器中获取“Tooltiptitle”和“Tooltiptext”？当鼠标结束时，工具提示将在qTip中显示tooltiptitle和tooltiptext，当鼠标移过新跨度时，新的tooltiptitle和tooltiptext将相应地改变。请告知如何做到这一点？

<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>

Answer 1

我会这样做：

<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>

Answer 2

愚蠢的我！答案在他们的官方网站上。 http://craigsworks.com/projects/qtip2/demos/#ajax

如何在div内容中应用qTip？

2 个答案: