How to apply qTip in div content?

问题

How could I get the "Tooltiptitle" and "Tooltiptext", both in one tooltip container, in qTip? When the mouse is over , then the tooltip will show the tooltiptitle and tooltiptext in qTip, the new tooltiptitle and tooltiptext will change accordingly when mouseover the new span. Please advice how to do it?

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

回答1:

I would go about it like so:

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

回答2:

Stupid me! The answer is on their official site. http://craigsworks.com/projects/qtip2/demos/#ajax

来源：https://stackoverflow.com/questions/7975160/how-to-apply-qtip-in-div-content

标签

jquery

qtip