Having 11 images in a row, I wish for a popout to appear when the mouse hovers over each one. Each image should trigger a different popout. While I have some code for this functionality, it seems to only work on the first image.
Snippet of the Code: index.html
<span title="Milestones" class="tl-icon">
<span class="tl-msg">
<span class="tl-msg-inside">
<div class="slice1">
<a id="slice1">RSS Feed</a>
<em style="top: -70px; display: none;">----</em>
</div>
<div class="slice2">
<a id="slice2">Slice 2</a>
<em style="top: -70px; display: none;">------</em>
</div>
...
</span>
style.css (Repeating CSS styling for each popout/image)
* { margin: 0; padding: 0; border: 0; }
.slice1 {
float: left;
margin-left: 0px;
...
}
...
.slice11 {
margin: 0px auto;
padding: 0;
width: 110px;
...
}
#rss-icon {
...
}
#slice11 {
...
}
tooltop.js (JavaScript code for each popout)
$(document).ready(function(){
...
});
Why is the popout functionality limited to only the first image?