使用jquery 1.3.2創建的簡單工具提示

我很難搞清楚爲什麼這段代碼不起作用。我的意圖是當用戶cliks工具提示div時顯示一條消息。將鼠標光標移出div後，工具提示應該關閉。我需要在單個頁面上顯示消息的最簡單的可能方式。我需要使用jQuery 1.3.2.Can任何人都可以幫忙嗎？謝謝使用jquery 1.3.2創建的簡單工具提示

<html> 
<head> 
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 

    $('.wrapper').live('click', showBox).live('mouseleave', hideBox); 

    function showBox(e){ 
     var x = e.pageX + 20; 
     var y = e.pageY + 20; 
     $('.tooltip').fadeIn(); 
     $('.tooltip').offset({ left: x, top: y }); 
    } 
}); 

function hideBox(){ 
    $('.tooltip').fadeOut(); 
} 

</script> 
<style> 
    .div{ margin:10px;padding:12px; 
     border:2px solid #666; 
     width:60px; 
     } 
    </style> 
</head> 
<body> 
<div class="wrapper">sometext</div> 
<div class="tooltip">tooltip1</div> 
</body> 
</html>

編輯：這裏是胡安·門德斯http://jsfiddle.net/HUG2Z/3/

來源

2012-11-16 user1031742

「這段代碼不起作用「是你可以說的最糟糕的事情，怎麼樣解釋什麼部分不工作，任何錯誤信息？你沒有顯示任何類型爲「.somefield」的HTML元素。你做的最好的事情是創建一個http://jsfiddle.net –

你確定你真的想使用1.3.2？ – MacMac

我編輯了我的問題以添加更多詳細信息。 Html元素是包裝div。是的，我需要使用1.3.2。 – user1031742

工作代碼，我無法弄清楚，爲什麼你在mouseleave使用live。沒有看到代碼的其餘部分，在click上使用它也沒有意義。 live在版本1.7中被棄用是有原因的，所以你不應該使用它，除非你真的明白它在做什麼和它的缺點。

下面的代碼工作http://jsfiddle.net/HUG2Z/1/

$(document).ready(function(){ 

    $('.somefield').click(showBox).mouseleave(hideBox); 

    function showBox(e){ 
     var x = e.pageX + 20; 
     var y = e.pageY + 20; 
     $('.tooltip').fadeIn(); 
     $('.tooltip').offset({ left: x, top: y }); 
    } 

    function hideBox(){ 
     $('.tooltip').fadeOut(); 
    } 
});

如果這是你現在想要什麼，只是改變的jsfiddle以更好地代表您的方案，並張貼在你的問題（而不是作爲一個在這裏評論）

來源

2012-11-16 17:43:51

你這麼快我甚至無法修復我在我的問題中犯的錯誤:)）這段代碼很有用，非常感謝。 – user1031742

btw。我試圖在jsfiddle中工作，但我沒有看到一個選項來選擇jquery 1.3.2 – user1031742

沒有，你必須使用腳本標籤自己加載它。見http://jsfiddle.net/HUG2Z/3/ –

使用jquery 1.3.2創建的簡單工具提示

回答

相關問題