我使用qtip2库来渲染工具提示,最近我一直遇到工具提示在Webkit浏览器上无法正常显示的问题。 Firefox工作得很好。
这里有一些示例代码:
// Make sure to only match links to wikipedia with a rel tag
$j('[role*="user-tooltip"][uid]').each(function()
{
// We make use of the .each() loop to gain access to each element via the "this" keyword...
$j(this).qtip(
{
content: {
// Set the text to an image HTML string with the correct src URL to the loading image you want to use
text: '<div class="nexus-toolbar-spinner"></div>',
ajax: {
url: contextPath+'/users/profile-short.jsp', // Use the rel attribute of each element for the url to load
type: 'GET', // POST or GET
data: {targetUser: $j(this).attr('uid') }, // Data to pass along with your request
success: function(data, status) {
// Set the content manually (required!)
this.set('content.text', data);
//FB.XFBML.Host.refresh();
FB.XFBML.parse();
}
}
},
position: {
my: 'bottom center', // Position the tooltip above the link
at: 'top center',
viewport: $j(window), // Keep the tooltip on-screen at all times
effect: false, // Disable positioning animation
target: $j(this),
adjust: {
method: 'shift'
}
},
show: {
event: 'mouseover',
solo: true // Only show one tooltip at a time
},
hide: {
fixed: true,
delay: 500
},
style: {
classes: 'ui-tooltip-wiki qtip-light qtip-shadow'
}
})
});
在Firefox上,这会在正在悬停的项目下方显示工具提示。但是,在Chrome和Safari上,工具提示有时会一直显示在页面底部,甚至可以延伸到页面底部。