Center Div和Javascript工具提示问题
问题描述：
当前我使用的javascript工具提示名为EZPZ tooltips。以下是EZPZ工具提示的demo页面。Center Div和Javascript工具提示问题
我有这种HTML和CSS的布局。
最大的div与位置相对于margin-left：auto;和margin-right：auto;并且小盒子里面的位置是绝对的。
下面是该html页面的完整代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>The EZPZ Way – EZPZ Tooltip </title>
<link href="css/application.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.ezpz_tooltip.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#stay-target-1").ezpz_tooltip({
contentPosition: 'belowStatic',
stayOnContent: true,
offset: 0
});
});
</script>
<style type="text/css" media="screen">
.wrapper {
position:relative;
width:800px;
height:600px;
border:1px solid #000;
margin-left: auto;
margin-right: auto;
}
h3 { margin-top: 20px; }
.tooltip-target {
display: block;
padding: 10px;
background-color: #EEE;
text-align: center;
width:100px;
position:absolute;
top:100px;
right:100px;
}
.tooltip-content {
display: none; /* required */
position: absolute; /* required */
width: 250px;
padding: 10px;
border: 3px solid #AF8A31;
background-color: #FFC848;
text-align: center;
color: black;
}
.tooltip-content p {
margin: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="tooltip-target" id="stay-target-1">Stay on Content ToolTip</div>
<div style="top: 1455px; left: 190px; display: none;" class="stay-tooltip-content tooltip-content" id="stay-content-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...<br>
<a href="javascript:">You can reach down and click this</a>
</p>
</div>
</div>
</body>
</html>
这里是EZPZ工具提示的javascript。
// EZPZ Tooltip v1.0; Copyright (c) 2009 Mike Enriquez, http://theezpzway.com; Released under the MIT License
(function($){
$.fn.ezpz_tooltip = function(options){
var settings = $.extend({}, $.fn.ezpz_tooltip.defaults, options);
return this.each(function(){
var content = $("#" + getContentId(this.id));
var targetMousedOver = $(this).mouseover(function(){
settings.beforeShow(content, $(this));
}).mousemove(function(e){
contentInfo = getElementDimensionsAndPosition(content);
targetInfo = getElementDimensionsAndPosition($(this));
contentInfo = $.fn.ezpz_tooltip.positions[settings.contentPosition](contentInfo, e.pageX, e.pageY, settings.offset, targetInfo);
contentInfo = keepInWindow(contentInfo);
content.css('top', contentInfo['top']);
content.css('left', contentInfo['left']);
settings.showContent(content);
});
if (settings.stayOnContent && this.id != "") {
$("#" + this.id + ", #" + getContentId(this.id)).mouseover(function(){
content.css('display', 'block');
}).mouseout(function(){
content.css('display', 'none');
settings.afterHide();
});
}
else {
targetMousedOver.mouseout(function(){
settings.hideContent(content);
settings.afterHide();
})
}
});
function getContentId(targetId){
if (settings.contentId == "") {
var name = targetId.split('-')[0];
var id = targetId.split('-')[2];
return name + '-content-' + id;
}
else {
return settings.contentId;
}
};
function getElementDimensionsAndPosition(element){
var height = element.outerHeight(true);
var width = element.outerWidth(true);
var top = $(element).offset().top;
var left = $(element).offset().left;
var info = new Array();
// Set dimensions
info['height'] = height;
info['width'] = width;
// Set position
info['top'] = top;
info['left'] = left;
return info;
};
function keepInWindow(contentInfo){
var windowWidth = $(window).width();
var windowTop = $(window).scrollTop();
var output = new Array();
output = contentInfo;
if (contentInfo['top'] < windowTop) { // Top edge is too high
output['top'] = windowTop;
}
if ((contentInfo['left'] + contentInfo['width']) > windowWidth) { // Right edge is past the window
output['left'] = windowWidth - contentInfo['width'];
}
if (contentInfo['left'] < 0) { // Left edge is too far left
output['left'] = 0;
}
return output;
};
};
$.fn.ezpz_tooltip.positionContent = function(contentInfo, mouseX, mouseY, offset, targetInfo) {
contentInfo['top'] = mouseY - offset - contentInfo['height'];
contentInfo['left'] = mouseX + offset;
return contentInfo;
};
$.fn.ezpz_tooltip.positions = {
aboveRightFollow: function(contentInfo, mouseX, mouseY, offset, targetInfo) {
contentInfo['top'] = mouseY - offset - contentInfo['height'];
contentInfo['left'] = mouseX + offset;
return contentInfo;
}
};
$.fn.ezpz_tooltip.defaults = {
contentPosition: 'aboveRightFollow',
stayOnContent: false,
offset: 10,
contentId: "",
beforeShow: function(content){},
showContent: function(content){
content.show();
},
hideContent: function(content){
content.hide();
},
afterHide: function(){}
};
})(jQuery);
// Plugin for different content positions. Keep what you need, remove what you don't need to reduce file size.
(function($){
$.fn.ezpz_tooltip.positions.aboveFollow = function(contentInfo, mouseX, mouseY, offset, targetInfo) {
contentInfo['top'] = mouseY - offset - contentInfo['height'];
contentInfo['left'] = mouseX - (contentInfo['width']/2);
return contentInfo;
};
$.fn.ezpz_tooltip.positions.rightFollow = function(contentInfo, mouseX, mouseY, offset, targetInfo) {
contentInfo['top'] = mouseY - (contentInfo['height']/2);
contentInfo['left'] = mouseX + offset;
return contentInfo;
};
$.fn.ezpz_tooltip.positions.belowRightFollow = function(contentInfo, mouseX, mouseY, offset, targetInfo) {
contentInfo['top'] = mouseY + offset;
contentInfo['left'] = mouseX + offset;
return contentInfo;
};
$.fn.ezpz_tooltip.positions.belowFollow = function(contentInfo, mouseX, mouseY, offset, targetInfo) {
contentInfo['top'] = mouseY + offset;
contentInfo['left'] = mouseX - (contentInfo['width']/2);
return contentInfo;
};
$.fn.ezpz_tooltip.positions.aboveStatic = function(contentInfo, mouseX, mouseY, offset, targetInfo) {
contentInfo['top'] = targetInfo['top'] - offset - contentInfo['height'];
contentInfo['left'] = (targetInfo['left'] + (targetInfo['width']/2)) - (contentInfo['width']/2);
return contentInfo;
};
$.fn.ezpz_tooltip.positions.rightStatic = function(contentInfo, mouseX, mouseY, offset, targetInfo) {
contentInfo['top'] = (targetInfo['top'] + (targetInfo['height']/2)) - (contentInfo['height']/2);
contentInfo['left'] = targetInfo['left'] + targetInfo['width'] + offset;
return contentInfo;
};
$.fn.ezpz_tooltip.positions.belowStatic = function(contentInfo, mouseX, mouseY, offset, targetInfo) {
contentInfo['top'] = targetInfo['top'] + targetInfo['height'] + offset;
contentInfo['left'] = (targetInfo['left'] + (targetInfo['width']/2)) - (contentInfo['width']/2);
return contentInfo;
};
})(jQuery);
当我徘徊，小灰框，提示显示这样是不对的。
但如果我删除保证金左：自动;和margin-right：auto;从包装类。有用。这里是工具提示应该显示的实际外观。
我认为这是什么地方发生了冲突。但我不知道如何解决它。反正有没有使用margin-left中心div：auto;和margin-right：auto; ？我尝试使用margin：0px auto;和text-align：center也是。但它仍然发生与工具提示相同的问题。
我需要站点位于中心位置，工具提示也可以在悬停内容下正常工作。请请帮助我。谢谢。
答
keepInWindow()是你的敌人在这里的外观。
编辑：让我们尝试一些轻松，欢迎喝醉了！
好的。我一直以jQuery插件为模板发誓。这是最好的工具提示插件，它的编码非常好。看看这个：http://jsfiddle.net/gyLpJ/1/
..或者，如果你喜欢有提示HTML为文档的一部分，而不是在JavaScript ...尝试这个漂亮的伎俩：http://jsfiddle.net/knQvR/2/
那么如何解决？评论keepInWindow（）不起作用:(..任何想法please？ – knightrider 2011-03-28 09:41:33
你使用什么浏览器？ – 2011-03-28 10:07:07
哼，对不起，我认为你也改变了一些html？我只注意到你删除了工具提示的顶部和左侧位置但是当我用你的文件替换了所有的东西时，在我的结尾没有任何东西出现，我测试了所有最新的浏览器，IE9，FF4，Chrome 10.但是，如果我添加回顶部和工具提示的左边位置来自html，它可以工作，但它与我面临的问题是一样的。工具提示不在框中，而不在内容之下。 – knightrider 2011-03-28 10:22:12