Question

我找到了关于当鼠标悬停在链接上时如何显示工具提示的课程。我尝试了相同的代码，但有按钮。当我将鼠标悬停在鼠标上时会出现工具提示，但它们一起出现，我不希望它像这样。

以下是代码示例：

 <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;
    }
);
});

Answer 1

您正在调用所有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上的工具提示

1 个答案: