Question

声明

这个问题是转贴。我最初问过它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;
}

如果从工具提示锚点中删除位置：相对标记，则工具提示会在Firefox中正确显示。但是，如果没有它，工具提示将无法在Internet Explorer中正确显示。

感谢您的帮助。

Answer 1

我停止使用自己的工具提示，并在一段时间后切换到Qtip（http://craigsworks.com/projects/qtip/）。它经过跨浏览器测试，易于实例化，看起来非常出色。如果您恰好是ThemeRoller用户，则测试版（在每晚版本中可用）完全支持ThemeRoller样式。总的来说，我强烈建议考虑让它变得简单....它只是减少脑损伤。

在即将发布的JQuery UI中，核心内置了类似的功能。类似的脚本可用于Dojo，Prototype和MooTools。

Answer 2

您发布的代码可以直接在Firefox中使用。工具提示没有出现在IE6中，相当奇怪的是你可以通过给锚的悬停状态一个背景颜色来解决这个问题......

#tree-view a
{
 background-color:#ff0000;
}

我想它只需要布局但通常的缩放：1;或者职位：亲属;没有相同的效果

您可以使用...

来修复滚动条

#tree-view
{
 overflow: display;
}

Internet Explorer中的绝对定位和滚动条

2 个答案: