Magki's Blog

使用方法很简单，将下面的 JS 脚本与 JQuery 一同载入，在需要做 Tip 效果的链接上添加一个 tips 属性，属性值就是 Tip 框里要显示的内容。

比如：<a href="javascript:void(0)" tips="这个是提示内容！" />测试提示</a>

想要美化 Tip 框的话完全可以在 tips 属性里加入用来修饰的 html 标签，然后在 CSS 文件里针对 #tip 以及其子元素定义 CSS 就可以了。

比如：<a href="javascript:void(0)" tips="<h3>提示标题</h3><div class='content'>这个是提示内容！</div>" />测试提示</a>

<script type="text/javascript">
    $().ready(function(){
        $('body').append('<div id="tip"></div>');
        $('#tip').css({display:'none',left:'0',top:'0',position:'absolute'});
        $('a[tips]').hover(
            function(e){
                var mouse = $.mousePos(e);
                
                if(mouse.x > $('body').width() - $('#tip').width()){
                    $('#tip').css('left', $('body').width() + $(document).scrollLeft() - $('#tip').width() - 10 + 'px');
                }else{
                    $('#tip').css('left', mouse.x + 10 + 'px');
                }
            
                $('#tip').css('top', mouse.y + 10 + 'px');
                $('#tip').html($(this).attr('tips'));
                $('#tip').show();
            },
            
            function(){
                $('#tip').hide();
            }
        );
    });

    $.extend({
        mousePos:function(e){
            var x,y;
            var e = e||window.event;
            return{
                x:e.clientX + $('body').scrollLeft() + $(document).scrollLeft(),
                y:e.clientY + $('body').scrollTop() + $(document).scrollTop()
            };
        }
    });
</script>

Magki Javascript jquery