Javascript 多个项目的JQuery工具提示帮助_Javascript_Jquery_Tooltip

Javascript 多个项目的JQuery工具提示帮助

javascript jquery

Javascript 多个项目的JQuery工具提示帮助,javascript,jquery,tooltip,Javascript,Jquery,Tooltip,我是一个初学者，只是在学习，所以我希望能得到一些代码的快速帮助，这些代码可以帮助我完成一个项目基本上，我用来帮助我完成项目的代码如下所示，它只允许我为每个元素显示一个工具提示。如何使用此代码让每个元素显示不同的工具提示？非常感谢你的帮助 <html> <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="tex

我是一个初学者，只是在学习，所以我希望能得到一些代码的快速帮助，这些代码可以帮助我完成一个项目

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

    <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>

这里有一个链接。

试试类似的东西好吗

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

这里有一个例子：

即使选择了jQuery的一个版本来使用它，似乎也无法让您的小提琴正常工作。另外，您为什么需要使用jQuery作为工具提示的用例是什么？他们会一直改变吗？谢谢你的帮助，我很感激！