javascript - 如何在接近右边距时将 jQuery aToolTip 插件修改为 "flip"向左？

Question

我正在使用工具提示，需要将工具提示从正常的左下方位置翻转到右侧位置，以防止它们离开页面。

我做了一些研究，在一些帮助下，我能够稍微修改代码以允许在单个图像上进行有效的“翻转”。该图像称为 hat_icon，代码如下:

        $(function() {

            //$("#wrap a[title]").tooltips();
            //$("#page-wrap a[title]").tooltips();

        //    $('a').aToolTip({  
        //    $('a').aToolTip({       
     $("a:not(.tooltipquestion, .accountnav, #hat_icon)").aToolTip({ 
        // no need to change/override  
        closeTipBtn: 'aToolTipCloseBtn',  
        toolTipId: 'aToolTip',  
        // ok to override  
        //   fixed: false,                   // Set true to activate fixed position  
        fixed: false,                   // Set true to activate fixed position   -- chris/peter 12/9
        clickIt: false,                 // set to true for click activated tooltip  
        //   inSpeed: 200,                   // Speed tooltip fades in  
        inSpeed: 400,                   // Speed tooltip fades in   --chris/peter 12/9
        outSpeed: 400,                  // Speed tooltip fades out  
        tipContent: '',                 // Pass in content or it will use objects 'title' attribute  
        toolTipClass: 'defaultTheme',   // Set class name for custom theme/styles  
        xOffset: 15,                     // x position  
        yOffset: -50,                     // y position  
        onShow: null,                   // callback function that fires after atooltip has shown  
        onHide: null                    // callback function that fires after atooltip has faded out      
    });

    jQuery('a.accountnav,#hat_icon').hover(function(){

        setTimeout(function(){
            jQuery('#aToolTip').css({'border-radius':'12px 0 12px 12px'});
        }, 1000);
    }, function(){
        setTimeout(function(){
            jQuery('#aToolTip').css({'border-radius':'12px 12px 12px 0'});
        },500);
    });

    jQuery('a.accountnav,#hat_icon').aToolTip({

        fixed: false,
        xOffset: -250,
        yOffset: -50, 
    });
    jQuery('#hat_icon').aToolTip({

        fixed: false,
        xOffset: -250,
        yOffset: -80, 
    });

});

我知道有一种方法可以使用 position: (collision: "flipfit flip") 之类的方法来检测碰撞，但我不知道如何正确实现它。你能帮帮我吗？

Answer 1

翻转

找到这个:

$('#'+settings.toolTipId).css({
    top: (el.pageY - $('#'+settings.toolTipId).outerHeight() - settings.yOffset),
    left: (el.pageX + settings.xOffset)
});

并替换为:

A_TOP = (el.pageY - $('#'+settings.toolTipId).outerHeight() - settings.yOffset);
if(A_TOP<0){
    A_TOP = 40;
}
A_LEFT = (el.pageX + settings.xOffset);
WindowWidth = ($(window).width()-$('#'+settings.toolTipId).outerWidth());
if(A_LEFT>WindowWidth){
     A_LEFT -= $('#'+settings.toolTipId).outerWidth();
}
$('#'+settings.toolTipId).css({
    top: A_TOP,
    left: A_LEFT,
    whiteSpace:"nowrap"
});