1

我使用读取元素title值的 JQuery 1.10.2 制作了一个简单的工具提示生成器。

它工作正常，除了元素是否在屏幕右侧之外，有时工具提示会漂浮在页面边缘。

如果元素靠近页面右侧，我想将其定位在靠近元素右边缘的位置。

我的代码在下面，也是一个 JSFiddle。所有输入表示赞赏！

function BuildTipsV3() {
    var tt = $("#ttfloat");
    $("[title]").on({
        mouseenter: function() {
            // set tooltip
            var o = $(this).offset();
            var y = o.top;
            var x = o.left;
            var tooltip = $(this).attr('title') || $(this).data('title');
            $(this).attr('title', '');
            $(this).data('title', tooltip);
            tooltip = tooltip.replace(/(\r\n|\n|\r)/gm, "<br/>");
            tt.html(tooltip);
            // position tooltip and show
            var ttRightSide = x + tt.width();
            if (ttRightSide < $(window).width()) { 
                tt.css({ top: (y + 15), left: (x + 5) });
            } else { 
                tt.css({ top: y, right: 0 }); // <-- problem (right:0) doesn't work
            }
            tt.show();
        },
        mouseleave: function () {
            $("#ttfloat").hide();
            $(this).attr('title', $(this).data('title')); // reset for accessibility
        }
    });
}

http://jsfiddle.net/HSfHD/2/

4

3 回答 3

1

如果您将鼠标悬停在左侧元素上，它会设置 CSS left，但是当您将鼠标悬停在右侧元素上时，您只会设置 CSSright属性，因此最终样式将同时设置left和right设置。

您需要left先将 back 重置为其默认值（其他属性可能相同），例如，请参阅我添加以下代码的演示：

if (ttRightSide < $(window).width()) {
    tt.css({
        top: (y + 15),
        right: 'auto',
        left: (x + 5)
    });
} else {
    tt.css({
        top: y + 15,
        right: 0,
        left: 'auto'
    });
}
于 2013-07-16T15:22:45.043 回答
1

你是如此接近。

小提琴

您只需要在不使用它们时重置left和样式：right

if (ttRightSide < $(window).width()) {
    tt.css({
        top: (y + 15),
        left: (x + 5),
        right:'auto'
    });
} else {
    tt.css({
        top: y + 15,
        right: 0,
        left:'auto'
    });
}
于 2013-07-16T15:23:37.913 回答
0

只计算左边。

tt.css({
    top: y+20,
    left: $(window).width() - tt.width() - 20
});
于 2013-07-16T15:23:53.030 回答