多個項目的JQuery工具提示幫助

我是一名初學者，只是在學習，所以我希望得到一些快速幫助，我正在使用一些代碼來幫助我處理一個正在進行的項目。多個項目的JQuery工具提示幫助

基本上，我用來幫助我的項目的代碼如下所示，它只是讓我顯示每個元素的一個工具提示。我將如何使每個元素使用此代碼顯示不同的工具提示？非常感謝您的幫助！

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

來源

2014-07-22 user3866170

似乎無法讓你的小提琴正常工作，甚至選擇一個版本的jQuery它後使用。 – MattD

另外，爲什麼你需要使用jQuery的工具提示的用例是什麼？他們會一直改變嗎？ – MattD

請嘗試類似的東西呢？

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/

來源

2014-07-22 20:14:47 4m1r

謝謝你的幫助，我很感激！ – user3866170

多個項目的JQuery工具提示幫助

回答

相關問題