Question

我想在表格内的链接上放置一个css工具提示。

这是我的标记：

<a class="tooltip" href="/link">
    My link text
    <span class="tooltip-span">
        my tooltip text
    </span>
</a>

这是我的css：

.tooltip {
    cursor: help;
    text-decoration: none;
    position: relative;
}

.tooltip .tooltip-span {
    margin-left: -999em;
    position: absolute;
}

.tooltip:hover .tooltip-span {
    border-radius: 5px 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

    position: absolute;
    left: 1em;
    top: 2em;
    z-index: 99;

    margin-left: 0;
    width: 250px;
    padding: 0.8em 1em;

    background: #F9F9F9;
    border: 1px solid #D9D9D9;
    color: black;
}

但是，在我的某些表中，<td>标记具有css属性overflow: hidden;，导致工具提示保持隐藏状态。

我真的不知道溢出属性如何破坏我的工具提示..有人可以向我解释这种关系吗？

由于

Answer 1

删除overflow:hidden属性？我想不出你为什么要在td内使用一个的原因，除非你试图抑制它内部div的溢出。

如果工具提示位于<td>内部，那么它很容易溢出，因此当您指示它使用overflow:hidden时它会被隐藏。

溢出隐藏的Css工具提示？

1 个答案: