首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >创建一个简单的工具提示指南?

创建一个简单的工具提示指南?
EN

Stack Overflow用户
提问于 2011-11-01 16:20:12
回答 1查看 576关注 0票数 0

为什么在下面的代码(示例)工具箱从页面中出来,它如何能够修复为自动(动态)的页,而不是从页面出来?

演示: http://jsfiddle.net/3UzDG/ (i mane是关于鼠标在其上显示提示框的how )参见图像:

代码语言:javascript
复制
$('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);

});
EN

回答 1

Stack Overflow用户

发布于 2011-11-01 16:41:34

您需要检测工具提示是否会重叠当前的视图,然后相应地调整..。已经有一个jQuery插件可用于工具提示--它完全可以实现您想要的功能--检查源代码以查看id如何检查视口大小等http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7969492

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档