Question

我是初学者，只是学习，所以我希望能够快速帮助我使用一些代码来帮助我完成我正在进行的项目。

基本上，我用来帮助我完成项目的代码如下所示，它只是让我为每个元素展示一个工具提示。如何使用此代码让每个元素显示不同的工具提示？非常感谢您的帮助！

    <html>
<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
    #hint{
        cursor:pointer;
    }
    .tooltip{
        margin:8px;
        padding:8px;
        border:1px solid blue;
        background-color:yellow;
        position: absolute;
        z-index: 2;
    }
</style>

</head>

<body>

<h1>jQuery tooltips example</h1>

<label id="username">Username : </label><input type="text" / size="50"> 
<span id="hint">hint (mouseover me)</span>

<script type="text/javascript">

$(document).ready(function() {

    var changeTooltipPosition = function(event) {
      var tooltipX = event.pageX - 8;
      var tooltipY = event.pageY + 8;
      $('div.tooltip').css({top: tooltipY, left: tooltipX});
    };

    var showTooltip = function(event) {
      $('div.tooltip').remove();
      $('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>')
            .appendTo('body');
      changeTooltipPosition(event);
    };

    var hideTooltip = function() {
       $('div.tooltip').remove();
    };

    $("span#hint,label#username'").bind({
       mousemove : changeTooltipPosition,
       mouseenter : showTooltip,
       mouseleave: hideTooltip
    });
});

</script>

</body>
</html>

以下是指向test的链接。

Answer 1

尝试更像这样的东西？

var changeTooltipPosition = function(event) {
      var tooltipX = event.pageX - 8;
      var tooltipY = event.pageY + 8;
      $('div.tooltip').css({top: tooltipY, left: tooltipX});
    };

var showTooltip = function(event) {
    console.log($(event.target).data('tip'));
    var tip = $(event.target).data('tip');
    $('div.tooltip').remove();
    $('<div>', {
        class: "tooltip",
        html: "I am "+tip+" :)"
    })
    .appendTo('body');
    changeTooltipPosition(event);
};

var hideTooltip = function() {
    $('div.tooltip').remove();
};

$("#username, #hint").hover(
    function(e){
        showTooltip(e);
    },
    function(e){
        hideTooltip(e);
    }
);

以下是一个例子：http://jsfiddle.net/2kzeX/1/

多项的JQuery ToolTip帮助

1 个答案: