设置css right属性时出错

Trouble setting css right property

本文关键字：出错 属性 right css 设置      更新时间：2023-09-26

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

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

如果元素位于页面右侧附近，我希望将其定位在靠近元素右边缘的某个位置。

我的代码在下面，也是一个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/

你离得太近了。

小提琴

您只需要在不使用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'
    });
}

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

您需要首先将left重置回其默认值（其他属性可能也是如此），例如请参阅演示，我在其中添加了以下代码：

if (ttRightSide < $(window).width()) {
    tt.css({
        top: (y + 15),
        right: 'auto',
        left: (x + 5)
    });
} else {
    tt.css({
        top: y + 15,
        right: 0,
        left: 'auto'
    });
}

只计算左边。

tt.css({
    top: y+20,
    left: $(window).width() - tt.width() - 20
});
相关文章：