2012-12-14 2 views
0

툴 팁을 사용하고 있으며 툴팁을 일반 왼쪽 하단 배치에서 오른쪽 배치로 가져와 페이지에서 벗어나지 않게해야합니다.jQuery 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, 
    }); 

}); 

나는 위치 같은 것을 사용하여 충돌을 감지하는 방법이 알고 : (충돌 "flipfit 플립"),하지만 난 방법을 모른다 올바르게 구현하십시오. 너 나 좀 도와 줄 수있어? 이것에 의해

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

을 그리고 대체 :

+0

을 또한, 나는 새로운 스타일 수 있도록 스팬에서이 사용자 지정 도구 설명을 표시해야 ; 그러나 현재는 링크로만 표시됩니다. 어떻게 수정합니까? – boy

답변

1

이 찾기 플립

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