0

私は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 :(衝突：「flipfitflip」）のようなものを使用して衝突を検出する方法があることは知っていますが、それを適切に実装する方法がわかりません。手伝って頂けますか？

4

1 に答える 1

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"
});
于 2013-02-04T23:01:48.683 に答える