Πρόβλημα με widget στο blogger

[rafinos]

Γεια σας παιδιά προσπαθώ να φτιάξω ένα widget για φιλικά blogs αλλά θέλω σε κάθε ένα από τα links που έχω να εμφανίζει μια μικρογραφία του site σαν tooltip

 

Δοκίμασα το παρακάτω (1 λινκ) αλλά δε δουλευεί

 

Να σημειωθεί ότι η jquey υπάρχει στο head του blog

<style>
#a{
	width: 176px;
	border: 2px solid #001c0d; 
	padding: 5px; 
	background-color: #E1CFB7; 
	border-radius: 5px;
}

#a1{
	text-align: center;
	font-size: 17px; 
	font-weight: bold; 
	color: #001c0d; 
	text-decoration: none;
	padding-top: 5px;
	padding-bottom: 5px;
}

#a_links{
	padding: 5px;
	padding-bottom: 0px;
}

#pop-up {
        display: none;
	position: absolute;
	text-align: center;
        width: 280px;
        padding: 5px;
	background-color: #E1CFB7;
        border: 4px solid #001c0d;
	border-radius: 5px;
}

</style>

<script type="text/javascript">
$(function(){
        var moveLeft = 20;
        var moveDown = 10;
        
        $('#trigger').hover(function(e) {
          $('#pop-up').show()
          .css('top', e.pageY + moveDown)
          .css('left', e.pageX + moveLeft);
        }, function() {
          $('#pop-up').hide();
        });
        
        $('#trigger').mousemove(function(e) {
          $("#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
        });
});
</script>

<div id="a">
	<div id="a1">
		Φιλικά Blogs
	</div>
	<div class="a_links">
		<a href="http://lagrimasdeoro.wordpress.com/" target="_blank" id="trigger">Lagrimas de oro</a>
	</div>
	<div id="pop-up"><img src="https://dl.dropboxusercontent.com/u/179231917/blog_popup_link/lagrimasdeoro.jpg" /></div>
</div>

Παιδιά είχα ένα λαθάκι στη σύνταξη αλλά και πάλι αντί να μου το εμφανίζει δίπλα στον κέρσορα το εμφανίζει κάπου πέρα από την οθόνη αφού με το που πηγαίνω επάνω στο λινκ τον κέρσορα μου εμφανίζει οριζόντια μπάρα κύλισης

Επεξ/σία 29 Μαρτίου 2014 από rafinos