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

你的小提琴的问题是边缘顶部：a.toolTipA范围内的-30px正在移动视口顶部链接的工具提示。您需要至少在页面下方的位置启动项目，或从css中删除该行。

根据this之前的stackoverflow帖子，设置position：fixed会使你的元素保持在视口中。

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

1 个答案: