Tôi tin rằng sự cố bắt nguồn từ sự không tương thích giữa các phiên bản qTip mới và jQuery.
Tôi đã dùng mã kiểm tra giờ cuối cùng với qTip để thử và tìm hiểu lý do mã của tôi từ chối hoạt động và sau khi xem qua forums để xem tôi có thể tìm thấy vấn đề tương tự hay không thread hoạt động hoàn hảo, nhưng nếu nó được hoán đổi với một phiên bản mới hơn của jQuery nó sẽ tạo ra một lỗi.
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.fn.qtip.styles.tooltipDefault = {
background : '#132531',
color : '#FFFFFF',
textAlign : 'left',
border : {
width : 2,
radius : 4,
color : '#C1CFDD'
},
width : 220
}
// we are going to run through each element with the classRating class
$('.classRating').each(function() {
var rating = $(this).attr('rating');
// the element has no rating tag or the rating tag is empty
if (rating == undefined || rating == '') {
rating = 'I have not yet been rated.';
}
else {
rating = 'The rating for this is ' + rating + '%';
}
// create the tooltip for the current element
$(this).qtip({
content : rating,
position : {
target : 'mouse'
},
style : 'tooltipDefault'
});
});
});
</script>
</head>
<body>
<div id="SomeID1" class="classRating" rating="73">I have a rating</div>
<div id="SomeID2" class="classRating" rating="66">I have a rating</div>
<div id="SomeID3" class="classRating" rating="">I have a rating but it is empty</div>
<div id="SomeID4" class="classRating">I dont have a rating</div>
</body>
</html>
Tôi đã tải xuống jQuery 1.3.2 from the Google Code website và ví dụ này hiện hoạt động hoàn hảo cho tôi. Tôi sẽ sớm bắt đầu điều chỉnh mã này theo nhu cầu của tôi để xem liệu có bất kỳ vấn đề nào khác hay không nhưng đối với bất kỳ ai vẫn gặp vấn đề này, tôi hy vọng bài đăng này hữu ích.
EDIT: Dường như đó là một vấn đề phiên bản không tương thích. Mã đơn giản này từ trang web tài liệu hoạt động hoàn hảo ngay bây giờ với các phiên bản tương tự. Hy vọng điều này là hữu ích cho bạn!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<a href="#" title="Hello World" class="example">Test</a>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// By suppling no content attribute, the library uses each elements title attribute by default
$('a[href][title]').qtip({
content: {
text: false // Use each elements title attribute
},
style: 'cream' // Give it some style
});
// NOTE: You can even omit all options and simply replace the regular title tooltips like so:
// $('#content a[href]').qtip();
});
</script>
</body>
</html>
EDIT 2: Có một phiên bản mới của qTip trong các công trình nên nó có thể là đáng chờ đợi cho điều đó, tuy nhiên nếu bạn muốn sử dụng qTip với phiên bản mới nhất của jQuery thì bạn có thể tải về một trong số nightly builds cho qTip. Sử dụng ví dụ trên, tôi đổi cả hai kịch bản cho jQuery mới nhất (1.4.2) với bản dựng hàng đêm mới nhất và có vẻ như nó hoạt động.
Nguồn
2010-08-25 09:44:57
Tôi vừa mới đến trang này sau khi cố gắng làm cho plugin này hoạt động và tôi sẽ là người đầu tiên nói rằng tài liệu không được viết tốt như bạn nghĩ. nếu không sẽ không cần phải viết câu hỏi này. –
Hoàn toàn đồng ý với EnderMB. Điều hiển nhiên đối với người ta không nhất thiết phải là tất cả. Tài liệu tại trang web qtip không rõ ràng với tôi. Không có ví dụ đơn giản với mã hoàn chỉnh có thể truy cập dễ dàng. – tucson
Nếu bạn cố gắng làm theo mẫu góc tròn này, nó không thể làm cho nó hoạt động: http://craigsworks.com/projects/qtip2/tutorials/styling/#corners –