好的,所以我有这个问题,我无法解决。 我看过许多解决方案,但没有一个起作用。 我正在使用一款具有嵌入式浏览器的软件-据我所知,它的IE7。

我将嵌入式浏览器链接到HTML文件。在该文件中,我基于通过软件传递给浏览器控件的值通过JavaScript生成HTML。

我正在构建的HTML是一个图形。

我有一个包含所有内容的容器div。 在其中,我有一个div浮动,该div保留了图形的比例。 然后,我有一个称为graph的div,它将显示数据。 该div可以x滚动,并且具有左边界,因此它不会与scale div重叠。 我通过JavaScript构建HTML代码,然后将图div的innerHTML设置为新代码。

我构建的代码由列div组成。 在div列中,还有其他6个div绝对放置,并赋予顶部以使其与刻度垂直对齐,并基于传递给控件的值显示。

列数取决于发送的值数,并且将改变。

所有这些都工作正常,并且定位的div显示在我想要它们的列中。

问题是我希望每个定位的div都有一个显示实际值的工具提示。 在我必须使用的浏览器控件中,这些工具提示始终出现在下一列中定位的div的后面,我需要它们显示在所有内容的顶部。

在下面的示例中,工具提示出现在右侧列中数据上方。 但是,在嵌入式IE7浏览器中,右列中的数据显示在工具提示上方。

    <style>
    .container
    {
        width: 800px;
        height: 600px;
        background-color: #dfd;
        overflow-x: scroll;
    }
    .scale
    {
        width: 100px;
        height: 520px;
        background-color: #fdd;
        float: left;
    }
    .graph
    {
        width: 1000px;
        height: 520px;
        background-color: #ddf;
    }
    .column
    {
        width: 20px;
        height: 520px;
        float: left;
        background-color: #fdf;
    }
    .value1
    {
        position: absolute;
        width: 24px;
    }
    .value2
    {
        position: absolute;
        width: 24px;
    }
    .value3
    {
        position: absolute;
        width: 24px;
    }
    .tooltip span
    {
        display: none;
        width: 100px;
        background-color: #fff;
        border: 1px solid #000;
        position: relative;
        z-index: 1;
    }
    .tooltip:hover span
    {
        display: inline-block;
        position: absolute;
        left: 24px;
        z-index: 2;
    }

</style>

<body>
    <div class="scale">Blah blah</div>
    <div class="container">

    <div class="graph">
        <div class="column">
            <div class="value1" style="top: 100px;"><a class="tooltip" href="#">1a<span>tooltip data</span></a></div>
            <div class="value2" style="top: 150px;">2a</div>
            <div class="value3" style="top: 200px;">3a</div>
        </div>
        <div class="column">
            <div class="value1" style="top: 130px;">1b</div>
            <div class="value2" style="top: 160px;">2b</div>
            <div class="value3" style="top: 180px;">3b</div>
        </div>
        <div class="column">
            <div class="value1" style="top: 90px;">1c</div>
            <div class="value2" style="top: 110px;">2c</div>
            <div class="value3" style="top: 140px;">3c</div>
        </div>
    </div>
</div>
</body>

jsfiddle简单示例。

我尝试过在各种元素上更改位置:absolute和:relative。 我尝试设置各种元素的z索引,结果始终是相同的。 工具提示显示在右侧列中定位值的后面。

#1楼 票数:0

解决了。

问题是我创建的每个列div都会重置堆栈顺序,因此位于其上方的列之后-上方。 上一列的子级(包括工具提示)将显示在新列的下方。

解决方案是在创建JavaScript时为JavaScript中的每一列设置z-index。 我将其设置为(99999-theLoopIndex),以便每个后续列的z索引都比上一列小一。 这意味着前一列的子级将比后一列及其子级出现在上方-具有更高的z-index。

  ask by Steven Berst translate from so

未解决问题?本站智能推荐:

1回复

IE7没有显示我的工具提示

问题是工具提示显示并在IE7中的脚本中出现错误(不知道可能是什么) 你可以看看吗? 如果您需要任何代码或其他东西,请询问...
2回复

d3工具提示删除了我的坐标轴(并且不起作用)

我正在尝试在此处的D3图中添加工具提示: http : //jsfiddle.net/ericps/b5v4R/1/ 但是添加这些mouseevents搞砸了所有内容的渲染方式,我不知道为什么。 它是带有轴的线图 在第144行注释掉这两个.on方法可以使所有内容呈现我期望的样子 任
1回复

是否可以在ie7中的子跨度前面显示父跨度的边界?

我想在文字后面加上阴影。 有人看到我在做什么错吗? 谢谢Grae
2回复

IE7中工具提示的Z-index问题

我有一个工具提示弹出窗口,其中的z-index级别最高。 当用户单击IE7中的工具提示时,它显示在页面内容的下方,而不是页面上方。 仅在IE7中会出现此问题。
2回复

嵌入式onclick的jQuery工具工具提示

我在图像上使用jquery工具的工具提示。 这是工具提示的基本用法,当有人将鼠标悬停在图像上,背景图像变暗并且工具提示弹出并显示“单击以获取详细信息”时,此操作可以正常进行。 我实际上希望工具提示是可单击的,以便它会打开一个包含图像细节的覆盖窗口。 我不确定该怎么做? html内容只是具
1回复

Extjsfileuploadfield默认浏览器工具提示问题

我在 Extjs 工作。 我有文件上传字段。 它将默认浏览器工具提示显示为 chrome 中的“未选择文件”和 Firefox 中的“未选择文件”。 我想禁用或隐藏此工具提示。 那么如何在 extjs 中执行此操作。 请帮我。
1回复

嵌入式Vega缺少工具提示

我有以下JSFiddle ,展示了一个小的 Vega 条形图: 如果您将 vega 对象复制到 Vega Editor 中,则在将鼠标悬停在图表元素上时会得到一个工具提示。 在 JSFiddle 中没有 tooltip 。 有人可以帮我获取 HTML 嵌入版本中的工具提示吗?
1回复

跨浏览器嵌入式视频灰度滤镜

在我的页面上,我也嵌入了vimeo的视频 对于CSS我有 这适用于所有浏览器,但不适用于Internet exploere 11。 我知道,自从Internet探索10以来,他们删除了filter属性。 我碰到了许多建议用于图像的小提琴,它们对它们具有悬停效果。 我纯粹是在为