javascript - 如何在所有内容之上显示工具提示

Question

我的工具提示有问题，它没有显示在所有内容之上。我尝试将 z-index 更改为一个非常高的数字，但没有成功。

CSS:

a.tooltipA {
outline:none;
}

a.tooltipA strong {
line-height:30px;
}

a.tooltipA:hover {
text-decoration:none;
}

a.tooltipA span {
z-index:10;
display:none;
padding:14px 20px;
margin-top:-30px;
margin-left:28px;
width:300px;
line-height:16px;
}

a.tooltipA:hover span {
display:inline;
position:absolute;
color:#111;
border:1px solid #DCA;
background:#fffAF0;
}

.callout {
z-index:20;
position:absolute;
top:30px;
border:0;
left:-12px;
}

/*CSS3 extras*/

a.tooltipA span {
border-radius:4px;
box-shadow: 5px 5px 8px #CCC;
}

HTML:

html += '<a href="#" class="tooltipA">'
html += '<span>' + "Tooltip text"
html += '</span></a>';

您可以查看此代码:第一个工具提示不完全可见。 JSFiddle

如果可能的话，我希望使用 css/html 得到答案，但 javascript 也是一个选项。我不能使用jquery。如果您需要更多详细信息，请告诉我。我也使用 bootstrap 3，但我想这并不重要，因为同样的事情发生在 JSFiddle 上。

Answer 1

你的 fiddle 的问题是 a.toolTipA 中的 margin-top:-30px 正在将顶部链接的工具提示移出视口(viewport)。您要么需要至少在页面下方开始元素，要么从 css 中删除该行。

根据this之前的 stackoverflow 帖子，设置position:fixed 会将你的元素保留在视口(viewport)中。