Question

我正在研究一个表的遗留代码。在某些单元格中，我添加了一个通知图标。当您将鼠标悬停在图标上时，<span>会显示一些信息。我希望能够让<span>明智地了解它的定位，但无法找到一个好的方法。我可以静态地定位它，但是根据它在表中的哪个单元格，它会在页面边缘丢失。我做了一个JsFiddle here来证明这个问题。不幸的是，除了HTML，CSS和vanilla JS之外，我不允许使用任何东西。

大多数标签的title属性非常聪明。我在jsFiddle（包含“Hello”的单元格）的表格中为其中一个单元格添加了标题。有没有办法让我的跨度表现出相同的智能行为？

Answer 1

可以在任何元素之前添加弹出窗口，方法是将弹出式html代码放在'div'中，其中'position：absolute;溢出：可见;宽度：0;高度：0'

当这些事件：'onmouseenter'，'onmouseleave'被触发时，只需在元素的'none'和'block'之间切换popup css属性'display'。

关于jsfiddle的例子： https://jsfiddle.net/johnlowvale/mfLhw266/

HTML和JS：

<div class="popup-holder">
  <div class="popup" id="popup-box">Some content</div>
</div>
<a href="javascript:" onmouseenter="show_popup()" onmouseleave="hide_popup()">Some link</a>

<script>
  function show_popup() {
    var e = $("#popup-box");
    e.css("display", "block");
  }

  function hide_popup() {
    var e = $("#popup-box");
    e.css("display", "none");
  }

</script>

CSS：

.popup-holder {
  position: absolute;
  overflow: visible;
  width: 0;
  height: 0;
}

.popup {
  background-color: white;
  border: 1px solid black;
  padding: 10px;
  border-radius: 10px;
  position: relative;
  top: 20px;
  width: 300px;
  display: none;
}

让弹出窗口具有智能定位

1 个答案: