ボタン上のツールチップ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の上に移動すると、それに関連付けられたツールチップも表示されます。私のコードでは、マウスが1つのボタンの上を移動すると、すべてのツールチップが表示されます。 – Amal

あなたはすべてのtooltipWrapperの代わりにボタンに属する1つのを呼んでいた。ここ

はコードのサンプルです。だから、すべての

$(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

答えて

関連する問題