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

我对工具提示有问题，它没有显示在所有的东西上面。我试着把z指数改成一个很高的数字，但没用。
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上也发生了同样的事情。

最佳答案

提琴的问题是边距顶部：a中的-30px。工具提示范围是将顶部链接的工具提示移出视口。您要么需要在页面的最下面开始您的项目，要么从css中删除这一行。
根据前面的stackoverflow post，设置position:fixed会将元素保留在viewport中。