Tooltips CSS and jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
body {
margin: 0; padding: 0;
font: normal 12px Verdana, Geneva, sans-serif;
line-height: 1.8em;
color: #333;
}
* {outline: none;}
a {color: #d60000; text-decoration: none;}
.tip {
color: #fff;
background:#1d1d1d;
display:none;
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.container {width: 960px; margin: 0 auto; overflow: hidden;}
</style>
<script type="text/javascript">
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
tip.css({ top: mousey, left: mousex });
});
});
</script>
<div class="container">
<p>
<a class="tip_trigger" href="#">Tooltiptext
<span class="tip" style="width: 400px;">
<img src="naruto.jpg" style="float: left; margin-right: 20px;"/>
http://r-ednalan.blogspot.com/ alis augue accumsan vulputate aptent vel aptent iusto ullamcorper vero. delenit hos dolore occuro tation euismod eum quadrum si nulla sa
</span>
</a>
</p>
</div>
