我找到了关于如何在鼠标悬停在链接上时显示工具提示的类(class)。 我尝试了相同的代码，但使用了按钮。当我将鼠标悬停在鼠标上时会出现工具提示，但它们会一起出现，我不希望它像这样。
下面是代码示例:
<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;
}
);
});
最佳答案
您正在调用所有 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)
关于jquery - 按钮上的工具提示 Jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6971054/