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

JQuery ToolTip Help for Multiple Items

本文关键字：项目 工具提示 帮助 JQuery      更新时间：2023-09-26

我是一个初学者，只是学习，所以我希望得到一些快速的帮助与一些代码，我正在使用，以帮助我与我正在工作的一个项目。

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

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

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

相关文章：