Question

我正在创建一个工具提示，并且在定位时遇到了一些问题。

工具提示设置为position: absolute，我有一个鼠标事件处理程序，根据top和{{1}修改left和pageX CSS }。

现在，我知道我可以将pageY设置为top，将pageY设置为left。这将使工具提示弹出到右下角。当有空间时，我试图将它定位在右上角的位置，但是如果它在Y轴的视口之外，则再次下降到右下角位置。

目前，我一直试图让工具提示显示在鼠标的右上角。我甚至不知道从哪里开始检测它是否在视口中。有人能指出我正确的方向吗？

pageX

Example on JSFiddle

Answer 1

有许多不同的方法来处理工具提示，尤其是在使用jQuery时。这种方法可能不是我的第一选择。但是，以下更改应符合您的预期。

var tt = document.createElement('div');
tt.id = "tt";

$('p').on('mouseenter', function(e) {
    var curPos = $( this ).offset().top - $( window ).scrollTop();
    var inView = (curPos < 250) ? 0 : 250;
    $(tt).css('top', e.pageY - inView);
    $(tt).css('left', e.pageX);
    $(tt).append($( this ).attr("data-myId"));
    $(tt).appendTo('body');
}).on('mousemove', function(e) {
    $(tt).css('top', e.pageY - $(tt).css('height'));
    $(tt).css('left', e.pageX);    
}).on('mouseleave', function(e) {
    $(tt).empty($( this ).attr("data-myId"));
    $(tt).detach();
});

Full changes in JSFiddle

我正在利用jQuery的offset()和scrollTop()方法来估计当前元素在文档可视区域内的位置。

根据jQuery的API文档，.offset()方法允许我们检索元素相对于的当前位置该文件。文档还说明垂直滚动位置（.scrollTop()）与隐藏的像素数相同从可滚动区域上方的视图。

我们使用这两种方法，并从元素的当前位置相对于文档减去可滚动区域上方的像素数。需要注意的一件重要事情是offset方法返回一个具有top和left属性的对象。

var curPos = $( this ).offset().top - $( window ).scrollTop();

由于您将#tt id设置为静态250px高度，我们可以检查相对于窗口可视部分的当前元素位置是否小于250.如果是，那么我们不减去任何内容并让工具尖端位于鼠标位置下方。如果它大于250，那么我们减去250px并且工具提示将高于当前鼠标位置。

我不确定您打算如何提取工具提示的内容，但我还添加了$(tt).append($( this ).attr("data-myId"));以使用data-myId值作为工具提示内容并$(tt).empty($( this ).attr("data-myId"));来清除它在mouseleave上。我希望这有帮助！

在视口中的房间时将工具提示放在鼠标上方，否则在鼠标下方

1 个答案: