免责声明
这个问题是转贴.我最初的要求是here.虽然有一个人足够友好地帮助我,但他最终找不到理想的解决方案.这种情况的现实是Doctype只是没有Stack Overflow拥有的大量用户.这对我来说是一个重要的问题,我真的需要更多意见.
问题
我已经使用HTML和CSS实现了树形视图.将鼠标悬停在此树形视图中的项目时,其下方会出现一个工具提示.一切在Firefox中都可以正常运行,但在Chrome或Firefox中却不能.
我的问题是工具提示正在使用绝对定位来允许其内容显示在其他元素上.当我在Firefox中滚动时,这些工具提示的位置会移动以反映它们的新位置.但是,Internet Explorer保留元素的原始位置.因此,如果将鼠标悬停在滚动的元素上,则工具提示将显示在元素最初所在的位置下.
我已经读过,可以通过添加位置来解决此问题：相对于我的树形视图,但这可以防止工具提示悬停在整个页面上.
这是一些示例代码来说明我的问题：
<!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>
<title>Example</title>
<!-- import css files -->
<link href="example.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="tree-view">
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
<a href="#">tooltip example
<span class="tooltip">
<strong>Info</strong>
<span class="tooltip-info">
Here is some information about the thing you're hovering over.
</span>
</span>
</a>
</div>
<div id="main-content">
main
</div>
</div>
</body>
</html>
这是示例的CSS：
#wrapper
{
}
#tree-view
{
float: left;
width: 200px;
height: 400px;
background-color: #BBFFFF;
overflow: auto;
}
#main-content
{
float: left;
width: 600px;
height: 400px;
background-color: #FFFFBB;
}
#tree-view a
{
display: block;
position: relative;
}
#tree-view a span.tooltip
{
position: absolute;
z-index: 100;
display: none;
}
#tree-view a:hover span.tooltip
{
/* positioning */
margin-left: 1em;
margin-top: 1em;
display: block;
position: absolute;
/*formatting*/
text-decoration: none;
background: #DDD;
border: 1px solid #BBB;
padding: 5px;
white-space: normal;
width: 300px;
color: black;
}
#tree-view .tooltip strong
{
display: block;
}
#tree-view .tooltip .tooltip-info
{
display: block;
}
如果从工具提示锚删除了position：relative标签,则工具提示在Firefox中会正确显示.但是,没有它,工具提示将无法在Internet Explorer中正确显示.
谢谢您的帮助.
最佳答案
我回来时不再使用自己的工具提示,而是切换到Qtip(http://craigsworks.com/projects/qtip/)a.它经过跨浏览器测试,易于实例化,并且外观出色.如果您恰好是ThemeRoller用户,则beta版(在夜间版本中可用)完全支持ThemeRoller样式.总的来说,我强烈建议您考虑一下它,以使生活变得轻松…
在即将发布的JQuery UI版本中,核心中将内置类似的功能.类似的脚本可用于Dojo,Prototype和MooTools.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。