如何根据可用空间更改工具提示位置

Question

如果底部空间不足，如何使工具提示显示在顶部，反之亦然？是否有 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>

Answer 1

好吧，你可以试试这个。它可能对你有帮助。

CSS

.foo {
  position: relative;
}

.tooltip {
  display: none;
}

.foo a:focus+.tooltip {
  display: block;
  background: black;
  position: absolute;
  color: white;
  padding: 5px;
  z-index: 1;
}

JavaScript

$("#tt").css({ top: $("#ll").position().top - 30 });

超文本标记语言

<br>
<br>
<div class="foo"><a href="#" class="foo" id="ll"> this is a link</a>
  <div class="tooltip" id="tt">this is a tooltip</div>
</div>