jQuery和CSS3简单的工具提示

HTML标记,我想保持标记尽可能简单但同时足够灵活以适应各种场景你会遇到。主要的链接将类名”tip_trigger“启动工具提示,一个类的“tip“工具提示内容。Your Link Key Word This will show up in the tooltip风格——CSS样式非常简单,我想鼓励你去创意为您自己的项目。工具提示默认是隐藏的,然后由jQuery触发显示在盘旋。我们给它一个绝对位置和z - index 1000以确保它呆在顶层元素。.tip { color: #fff; background:#1d1d1d; display:none; /*--Hides by default--*/ padding:10px; position:absolute; z-index:1000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}你可以选择从jQuery网站下载文件,或者您也可以使用这一个托管在谷歌。$(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; } //Absolute position the tooltip according to mouse position tip.css({ top: mousey, left: mousex }); });});

在线演示        积分下载        6毛下载        砍两刀下载