javascript - 无法设置 css 权限属性

Question

我使用 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/

Answer 1

你们是如此亲密。

FIDDLE

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