我已经为此烦恼了好几个小时,我的 qtip 在 foreach 循环中动态生成。当我将鼠标悬停在第二张或第三张图片上时,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>