<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> <p> <a href="#">Tooltiptext <span> <img src="naruto.jpg"/> 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> other source : http://tutorial101.blogspot.com, http://pinterest.com, http://news.detik.com
0 Response to "Tooltips CSS and jQuery"
Posting Komentar