4

我通过纯 CSS3 显示工具提示，但我唯一的问题是工具提示的内容的长度确实不同。其中一些只有 1 行长，其他长达 4 行。

现在是这些工具提示Shadow DOM元素，那么我如何通过JavaScript（或纯CSS解决方案会更好（也许是CSS calc？））获得这些工具提示的（不同）高度以调整所有工具提示的边距锚元素？

HTML：

<a href="#" data-title="This is one example tooltip">Test #1</a>
<a href="#" data-title="This is one example tooltip - This is one example tooltip [...]">Test #2</a>

CSS：

a:before {
    content: attr(data-title);
    position: absolute;
    background: blue;
    padding: 7px 10px;
    width: 440px;
    max-height: 72px;
    text-align: left;
    line-height: 18px;
    margin: 0 0 0 0;
    opacity: 0;
    color: white;
    transition: opacity 0.15s ease-out 0.25s, margin-top 0.15s ease-out 0.25s;
}

a:hover:before {
    opacity: 1;
    margin-top: -40px;
    transition: opacity 0.2s ease-out 0.5s, margin-top 0.2s ease-out 0.5s;
}

现场演示：http: //jsfiddle.net/qq3YJ/

4

1 回答 1

1

这是 jsfiddle 解决方案：http: //jsfiddle.net/kwJz9/2/

这就是我所做的：

  1. a相对，所以这意味着a:before元素将具有相对于他的 parent 的位置a。

  2. 要将工具提示放在链接下方，我使用bottom了属性而不是margin-top. 因为我曾经position: relative链接过 - 这意味着bottom:0例如当工具提示的底部边框正好位于 parent 的底部边框上时a。

  3. 因为您想在链接下查看工具提示 - 在:hover我更改bottom为1.4em，它在文本下有点（.4em将是它们之间的距离）。

  4. 因为你想看它动画，所以我改为transition包含bottom属性而不是“margin-top”。

  5. 最后一个问题是，因为您:before始终在 html 流中拥有元素-在第二个工具提示（很大）的情况下-它占用的空间比 更多a，因此当您将其悬停时（不是链接）-您可以看到它。所以我还添加visibility: hidden了:before元素以确保如果鼠标悬停在它上面你不会看到它。

于 2013-06-02T17:25:43.373 回答