2011-10-19 3 views
2

jquery 툴팁을 만들었지 만 문제가 생겼습니다. linke "ToolTip"상자에 마우스를 입력하면 위의 "ToolTip"링크 바로 위에 "ToolTip"링크가 나타나지 않습니다. 그것을 설정할 수 있습니까?동적 jquery 툴팁 생성

데모 :이 같은http://jsfiddle.net/uUwuD/1/

function setOffset(ele, e) { 
    $(ele).prev().css({ 
     right: ($(window).width() - e.pageX) + 10, 
     top: ($(window).height() - e.pageY), 
     opacity: 1 
    }).show(); 
} 

function tool_tip() { 
    $('.tool_tip .tooltip_hover').mouseenter(function (e) { 
     setOffset(this, e); 
    }).mousemove(function (e) { 
     setOffset(this, e); 
    }).mouseout(function() { 
     $(this).prev().fadeOut(); 
    }); 
} 
tool_tip(); 
+0

질문을 명확하게 설명해 주시겠습니까? 툴팁에 무엇을할까요? –

+0

제발 여기 내 예제를 참조하십시오 : http://jsfiddle.net/uUwuD/1/ 그대로 도구 상자 : http://img4up.com/up2/06331814381620909499.gif하지만 원하는 : http://img4up.com /up2/77297140490196263570.gif. 어떻게 해결할 수 있을까요? –

답변

1

뭔가 여전히 툴팁 때로는 새로운 앵커의 호버에 사라져 버그가있어, 작동합니다. 그 문제를 해결하거나 다른 질문을 드리겠습니다.

function setOffset(ele, e) { 
    var tooltip = $(ele).prev(); 
    var element = $(ele); 
    tooltip.css({ 
     left: element.offset().left - element.width() - tooltip.width(), 
     top: element.offset().top - tooltip.height(), 
     opacity: 1 
    }).show(); 
} 

그리고 여기가의 jsFiddle있어 : http://jsfiddle.net/uUwuD/4/

+0

왜'mousemove'를 사용하지 않습니까? –

0

당신이 마이너스를 당신의 툴팁의 폭과 창 폭을 계산해야하고

if(winwidth - (offset *2) >= tooltipwidth + e.pageX){ 
          leftpos = e.pageX+offset; 
        } else{ 
         leftpos = winwidth-tooltipwidth-offset; 
        } 

을 상쇄하면 자세한 내용을 원하는 경우하시기 바랍니다 참조 :