Question

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

我做了一些研究，在一点帮助下，我能够将代码修改为一点，以便在单个图像上进行“翻转”。该图像称为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这样的东西来检测碰撞:(碰撞：“翻转翻转”），但我不知道如何正确实现它。你能救我吗？

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"
});

当接近右边距时，如何修改jQuery aToolTip插件以“翻转”到左边？

1 个答案: