我在模板中包含了一些文字,我正在尝试添加工具提示以使用此代码:
<a class="tooltip" href="#">Text<span>Tooltip pop-up text</span></a>
<style type="text/css">
.tooltip { border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative; }
.tooltip span { margin-left: -999em; position: absolute; }
.tooltip:hover span { font-family: Calibri, Tahoma, Geneva, sans-serif; position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250%; }
</style>
然而,我遇到的问题是我无法保持文本相对定位,同时也在工具提示上实现绝对位置(它扩展但在模板div内)。
使用.tooltip span绝对定位.tooltip相对地实现了弹出窗口本身的预期效果,但显然会丢失链接在文本块中的定位。
有人知道解决方案吗?
由于
答案 0 :(得分:0)
试试这个:
a.tooltip {
color: #000000;
outline: none;
cursor: help;
text-decoration: underline;
display: block;
text-align: center;
}
.tooltip > span {
display: block;
position: absolute;
left: 50%;
}
.tooltip span span {
font-family: Calibri, Tahoma, Geneva, sans-serif;
z-index: 99;
position: relative;
top: 1em;
left: -50%;
white-space: nowrap;
display: none;
}
.tooltip:hover span span {
display: inline-block;
}
<a class="tooltip" href="#">Text
<span>
<span>Tooltip pop-up text</span>
</span>
</a>