如果底部空间不足，如何使工具提示显示在顶部，反之亦然？是否有 CSS hack 或者我必须使用 JS 来计算它？
.foo {
position: relative;
}
.tooltip {
display: none;
}
.foo a:focus+.tooltip {
display: block;
background: black;
position: absolute;
color: white;
padding: 5px;
z-index: 1;
}<div class="foo"><a href="#" class="foo"> this is a link</a>
<div class="tooltip">this is a tooltip</div>
</div>
<div class="foo"><a href="#" class="link">this is a link</a>
<div class="tooltip">this is a tooltip</div>
</div>