Question

我正在通过纯CSS3显示工具提示，但我唯一的问题是工具提示的内容有着不同的长度。其中一些只有1行，有些则最多4行。

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

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/

Answer 1

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

这就是我所做的：

使a相对，这意味着a:before元素相对于其父a的位置。
要将工具提示放在链接下，我使用了bottom属性而不是margin-top。因为我使用了position: relative来链接 - 这意味着bottom:0例如，当工具提示将其底部边框设置在父a的底部边框上时。
因为您希望在链接下看到工具提示 - 在:hover我将bottom更改为1.4em，这是一点点文字（.4em将是距离他们之间）。
因为您希望看到它是动画的，所以我更改了transition以包含bottom属性，而不是＆＃39; margin-top＆＃39;。
最后一个问题是因为你总是在html流程中有:before元素 - 如果是第二个工具提示（很大） - 它占用的空间比a多，所以当你将它悬停（不是链接） - 你可以看到它。所以我还将visibility: hidden添加到:before元素，以确保如果鼠标将在它上面，你将看不到它。

如何通过JavaScript获取HTML阴影元素的维度

1 个答案: