按鈕上的工具提示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

回答

相關問題