如何在foreach循环中添加不同的qtip？

Question

我已经把头发拉了好几个小时，我已经在foreach循环中动态生成了qtip。当我将鼠标悬停在第二张或第三张图像上时，qtip仍显示在第一张图像下（其中.class是第一张图片）。我错过了什么？

这是我的javascript     

        // On DOM ready...
        $(function() {

            $('.tip').each(function() {
                var tipContent = $(this).next('.tip-content').html();
                $(this).qtip({
                    content: tipContent,
                    show: 'mouseover',

                    hide: 'mouseout',

    position: {
        my: 'top middle',  // Position my top left...
        at: 'bottom middle', // at the bottom right of...
        target: $('.tip') // my target
    },

style: {
    classes: 'mytip',
    tip: {
        corner: true,
        mimic: false,
        method: true,
        width: 18,
        height: 8,
        border: 1,
        offset: 0,
    }
},
      hide: { 
         when: 'unfocus', 
         fixed: true 
      },
          show: { 
         when: 'mouseover', 
         solo: true // Only show one tooltip at a time
      },




                })
            });

        });

    </script>

这是HTML。

 <div class="row">


    <div id="index-last-shows" class="three columns"><div class="tip"><a href="tvshow.php?id=37"><img src="images/1439629.jpg"      /></a></div><div class="tip-content">       
    <div class="tip-container">

    <div class="tip-header"><div class="title-tip-container"><h1>   Community      </h1></div></div>




    </div>

    </div></div><div id="index-last-shows" class="three columns"><div class="tip"><a href="tvshow.php?id=38"><img src="images/2234222.jpg"      /></a></div><div class="tip-content">       
    <div class="tip-container">

    <div class="tip-header"><div class="title-tip-container"><h1>   Orphan Black      </h1></div></div>




    </div>

    </div></div><div id="index-last-shows" class="three columns"><div class="tip"><a href="tvshow.php?id=39"><img src="images/0496424.jpg"      /></a></div><div class="tip-content">       
    <div class="tip-container">

    <div class="tip-header"><div class="title-tip-container"><h1>   30 Rock      </h1></div></div>




    </div>

    </div></div><div id="index-last-shows" class="three columns"><div class="tip"><a href="tvshow.php?id=40"><img src="images/1442437.jpg"      /></a></div><div class="tip-content">       
    <div class="tip-container">

    <div class="tip-header"><div class="title-tip-container"><h1>   Modern Family      </h1></div></div>




    </div>