12
A
回答
15
1
0
我在我最新的網站上使用wayfarerweb.com/wtooltip.php。易於使用,但有些時候,IE顯示NULL而不是文本。
1
我已經使用了實際的jQuery tooltip。 Here's演示它可以做什麼。它很容易使用,您可以配置外觀。
1
我已經定製了Robert Baumgartner's tooltip腳本,所以它不會彈出屏幕上的項目。我只是將它添加到我的母版頁,它將在頁面準備就緒時自動執行。
window.viewport =
{
height: function() {
return $(window).height();
},
width: function() {
return $(window).width();
},
scrollTop: function() {
return $(window).scrollTop();
},
scrollLeft: function() {
return $(window).scrollLeft();
}
};
jQuery.tooltip = function() {
tooltipClass = ".tooltip"; // replace with your class, for multiple classes, separate with comma.
function str_replace(search, replace, subject) {
return subject.split(search).join(replace);
}
xOffset = 10;
yOffset = 20;
fadeInTime = 300;
function positionToolTip(e) {
var offsetFromTop = e.pageY - viewport.scrollTop();
var offsetFromLeft = e.pageX - viewport.scrollLeft();
var tooltipObj = $('#tooltip');
var pxToBottom = viewport.height() - (e.pageY - viewport.scrollTop());
var cssTop = 0;
var cssLeft = (e.pageX + yOffset);
var topMargin = parseFloat(tooltipObj.css('marginTop'));
if (isNaN(topMargin)) {
topMargin = 0;
}
var topPadding = parseFloat(tooltipObj.css('paddingTop'));
if (isNaN(topPadding)) {
topPadding = 0;
}
var topBorder = parseFloat(tooltipObj.css('border-top-width'));
if (isNaN(topBorder)) {
topBorder = 0;
}
var topOffset = topMargin + topPadding + topBorder;
if (tooltipObj.height() > viewport.height()) {
cssTop = viewport.scrollTop() - topOffset + topPadding;
}
else if (tooltipObj.height() > pxToBottom) {
cssTop = viewport.scrollTop() + (viewport.height() - tooltipObj.height()) - topOffset - topPadding - topBorder;
}
else {
cssTop = e.pageY - xOffset;
}
tooltipObj.css({ top: cssTop, left: cssLeft }).fadeIn(fadeInTime);
}
jQuery("[title]").hover(function(e) {
if (this.t === undefined || this.t.length == 0) {
this.t = this.title;
this.title = "";
this.t = str_replace("::", "<br />", this.t);
this.t = str_replace("[!]", "<span class='tooltipTitle'>", this.t);
this.t = str_replace("[/!]", "</span><br />", this.t);
this.t = str_replace("[", "<", this.t);
this.t = str_replace("]", ">", this.t);
}
if (this.t != "") {
jQuery("body").append("<p id='tooltip'>" + this.t + "</p>");
positionToolTip(e, this);
}
}, function() {
jQuery("#tooltip").remove();
});
jQuery("[title]").mousemove(function(e) {
positionToolTip(e);
});
jQuery("[title]").bind('remove', function() {
jQuery("#tooltip").remove();
});
jQuery("[title]").bind('disabled', function() {
jQuery("#tooltip").remove();
});
}
jQuery(document).ready(function() {
jQuery.tooltip();
});
0
我寫了一個非常簡單的工具提示插件。你可以找到它@http://plugins.jquery.com/project/hovertiphtml它支持工具提示/ hovertip(大多數工具提示插件沒有)和自定義CSS內的完整的HTML標記。
2
我強烈建議http://craigsworks.com/projects/qtip2/ vs qtip v1。 qtip v1不再維護,qtip2有一些很棒的新功能。
相關問題
- 1. jQuery的複選框工具提示
- 2. jQuery的工具提示插件沒有提示工具提示
- 3. JQuery工具提示
- 4. 工具提示jquery
- 5. jQGrid與jQuery的工具提示工具
- 6. JQuery工具提示VS JQuery UI工具提示
- 7. jquery工具提示顯示
- 8. jQuery的工具提示
- 9. jQuery的工具提示
- 10. jQuery工具提示自定義提示
- 11. jQuery的工具提示問題 - jQuery的
- 12. AJAX(jquery)+工具提示
- 13. jquery動態工具提示
- 14. JQuery工具提示問題
- 15. 多行jquery工具提示
- 16. jquery字段工具提示
- 17. jQuery Tools工具提示
- 18. Jquery工具提示編輯
- 19. jQuery dynatree工具提示
- 20. jquery動態工具提示
- 21. jQuery mouseenter mouseleave工具提示
- 22. 首選的MySQL工具
- 23. 這jQuery的工具提示:顯示
- 24. JQuery的工具提示總是顯示標題名稱爲工具提示
- 25. jquery工具提示不工作
- 26. jquery ui工具提示不工作
- 27. jquery工具提示延遲顯示
- 28. 基本的工具提示(jQuery的)
- 29. 工具提示選擇框選項
- 30. JQuery工具提示選擇嵌套Div顯示問題
這裏有很多有用的插件,但這是一個非常簡單的插件,可以讓您開始編寫插件,因此存在許多類似的功能目標。 – 2009-12-15 18:31:21