JQuery 翻转工具提示从屏幕上消失 - 包括小提琴答案

【问题标题】：JQuery rollover tooltip disappears off screen - fiddle includedJQuery 翻转工具提示从屏幕上消失 - 包括小提琴
【发布时间】：2015-06-08 22:10:07
【问题描述】：

我正在开发一个网站，该网站使用同位素以网格形式排列多个项目。

我正在实现一个翻转系统，该系统显示带有附加信息的弹出框。

问题在于，在窄屏幕上，弹出窗口从屏幕右侧流出，示例如下：

https://jsfiddle.net/wsgfuace/2/

理想情况下，当滚动到屏幕的右半部分时，我希望弹出窗口锚定在右下角而不是左下角。

请问这怎么可能？

我发现这段代码看起来可能有效，但无法成功实现：

$(function() {
    $('.item-s').hover(function() {
        var win=$(this).find('.big-s:visible');
        if(win.length>0) {
            var screenwidth=$('body').width();
            var width=win.width();
            var pos=win.position();
            var rightpos=width+pos.left;
            if(rightpos>screenwidth) {
                var moveleft=rightpos-screenwidth;
                win.css('margin-left','-'+moveleft+'px');
            } else {
                win.css('margin-left','0px');
            }
        }
    });
});

【问题讨论】：

同位素网格布局是否使所有元素都绝对定位？现在页面的结构方式将非常混乱，试图让一些东西工作（据我所见）
谢谢马特。 Def 看起来同位素网格正在使用绝对定位，但是还有一个转换命令用于在网格内定位项目，即 transform: translate3d(200px, 50px, 0px);后者不能用于评估项目的位置，然后相应地定位工具提示吗？
另外说明，在同位素itemSelector : ".item-s, .item-m, .item-l" 中不应有3 个不同的itemSelector，只选择一个类，如.item。另外，为什么要加载 Packery 和 Isotope，因为它们没有一起使用。我猜你想要同位素特定的包装布局，而不是单独的包装 javascript。

标签： javascript jquery mouseover jquery-isotope

【解决方案1】：

这是通过结合使用 jquery 来检测页面宽度和光标位置来解决的：

$(".item-s").mouseover(function(e){
    var pageWidth = $('body').width();
    if ( e.pageX > pageWidth / 2 ){
        $(this).toggleClass('special');
    }
});

并通过向 CSS 添加一个“特殊”div 来移动弹出窗口，如下所述：

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

在此处更新了 ref 的小提琴：

https://jsfiddle.net/wsgfuace/5/

【讨论】：