私はこれについて何時間も髪を引っ張ってきました.foreachループ内で動的に生成されたqtipを持っています。2 番目または 3 番目の画像にカーソルを合わせると、最初の画像の下に 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>