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

回答

相关问题