用jQuery&CSS实现简单的提示效果

相信大家对jQuery并不陌生，简单的说jQuery是一个Javascrīpt库。jQuery 极大地简化了 JavaScript 编程。

今天分享给大家的是一个网页提示的效果，大家可以先看一下演示！

演示地址：http://www.56mp.cn/upload/Tooltip/

HTML部分：

尽可能的简单，但同时又有足够的灵活性，以适应不同情况下遇到的标记。在这个效果中主要运用了class=tip_trigger类名来启动提示。以前class=tip提示类来保存提示内容。

<a class=tip_trigger href="http://www.56mp.cn/search.asp?q=搜索引擎优化">搜索引擎优化<span style="WIDTH: 400px" class=tip>搜索引擎优化(Search Engine Optimization，简称SEO)是一种利用搜索引擎的搜索规则来提高目的网站在有关搜索引擎内的排名的方式。，而搜索引擎优化包括对网站首页代码和图片的优化。</span></a>

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 });
    });
});

如有其他修改不懂的请与本站联系。
代码整理：逸诚科技　＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途