我使用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(/(rn|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
});