버튼 위로 툴팁 Jquery

마우스를 링크 위로 가져 가면 툴팁을 표시하는 방법에 대한 교훈을 얻었습니다. 버튼을 사용하여 동일한 코드를 시도했습니다. 툴팁은 마우스 위로 마우스를 가져 가면 나타납니다.하지만이 모든 것들이 함께 나타나기를 원하지 않습니다.버튼 위로 툴팁 Jquery

<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" ></script> 
<script src="tooltip.js" type="text/javascript" ></script> 
<style> 
.toolTip { 
    padding-right: 20px; 
    background: url(images/help.gif) no-repeat right; 
    color: #3366FF; 
    cursor: help; 
    position: relative; 
} 
.toolTipWrapper { 
    width: 175px; 
    position: absolute; 
    top: 20px; 
    display: none; 
    color: #FFF; 
    font-weight: bold; 
    font-size: 9pt; 
} 

.toolTipMid { 
    padding: 8px 15px; 
    background: #A1D40A url(images/tooltip.gif) top; 
} 
</style> 
</head> 

<body> 
<span class="toolTip" title="Click here to start a new draw"> <input type="submit" value="New Draw" style="width:150; text-align:left; "></span></input> 

<span class="toolTip" title="Finally when you finish drawing the page, click on this button. The image will be displayed at the bottom."><input type="button" id="save" value="Save Draw" style="width:150; text-align:center; margin-left:40"/></span></input> 
    </body> 

</html>

JS 코드는 다음과 같습니다 :

$(document).ready(function() { 
$('.toolTip').hover(
    function() { 
    this.tip = this.title; 
    $(this).append(
     '<div class="toolTipWrapper">' 
      +'<div class="toolTipMid">' 
       +this.tip 
      +'</div>' 
     +'</div>' 
    ); 
    this.title = ""; 
    $('.toolTipWrapper').fadeIn(300); 
}, 
function() { 
    $('.toolTipWrapper').fadeOut(100); 
    this.remove(); 
     this.title = this.tip; 
    } 
); 
});

출처

2011-08-07 Amal

이었다 변경 다음은 작업 코드입니다. 질문이 여기에 무엇인지 전혀 모르겠습니다. – wolv2012

jsFiddle을 사용하면 좋을 것입니다. http://jsfiddle.net. 이렇게하면 다른 사람들이 코드를 더 빨리 테스트하고 편집 할 수 있습니다. –

툴팁이 모두 함께 표시됩니다. 마우스가 버튼 1 위로 움직일 때 관련된 툴팁이 나타나고, 마우스가 버튼 2 위로 움직일 때 툴팁과 관련된 툴팁이 나타납니다. 내 코드에서 마우스가 한 버튼 위로 움직일 때 모든 툴팁이 표시됩니다. – Amal

당신은 모든 tooltipWrapper의 대신 버튼에 속하는 하나를 호출 한 다음

코드의 샘플입니다. 그래서 모든

$(document).ready(function() { 
    $('.toolTip').hover(

    function() { 
     this.tip = this.title; 
     $(this).append('<div class="toolTipWrapper">' + '<div class="toolTipMid">' + this.tip + '</div>' + '</div>'); 
     this.title = ""; 
     $('.toolTipWrapper', this).fadeIn(300); 
    }, function() { 
     $('.toolTipWrapper', this).fadeOut(100); 
     this.remove(); 
     this.title = this.tip; 
    }); 
});

당신은 당신이 요구하는지 무엇인지 명확히 할 필요가 $('.toolTipWrapper', this)

출처

2011-08-07 06:11:38 Joey

고맙습니다. 작동합니다 :-) – Amal

버튼 위로 툴팁 Jquery

답변

관련 문제