创建工具提示指南简单？

Question

为什么在下面的代码（示例）工具提示框中从页面出来，如何将页面不是从页面中自动（动态）修复？

演示： http://jsfiddle.net/3UzDG/（我的鬃毛约为how，鼠标悬停在其上显示toltip box out page）查看图片：

$('li a').hover(function() {

    var title = $(this).next('.tooltip').html();
    var offset = $(this).offset();

    $tooltip = $('<div />').addClass('show_tooltip').html(title);

    var delay = setTimeout(function() {

        $('body').append($tooltip);
        var width = $tooltip.outerWidth();

        var p_top = offset.top;
        var p_left = offset.left - width; 
        $tooltip.css({top: p_top, left: p_left}).fadeIn(180);

    },280);

    $(this).data('delay', delay);
    $(this).data('tooltip', $tooltip);

},function() {

    delay = $(this).data('delay');
    $tooltip = $(this).data('tooltip');
    $tooltip.remove();
    clearInterval(delay);

});

Answer 1

你需要检测工具提示是否会与当前视口重叠，然后进行相应的调整....已经有一个可用于工具提示的jQuery插件 - 它完全符合你的要求 - 查看源代码以查看id检查的方式视口大小等http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/