HTML / CSS范围弹出显示无响应

Question

我正在尝试制作Chrome扩展程序，当鼠标悬停在p，h1等上时，会显示一个包含该元素font-family的弹出式窗口。它大部分都有效，但有时无法正确显示，如下图所示。

如何设置CSS样式，使其绝对定位，并始终展开以适应文本并完全可见？扩展程序使用appendChild将包含隐藏弹出窗口的范围添加到当前元素。

请注意，在第二张图片中，由于其父级的限制，弹出窗口会被切断。

CSS：

.crx_mouse_visited:hover .popup {
  visibility: visible;
}

.popup {
  display: block;
  position: absolute;
  width : 100%;
  height: auto;
  z-index: 100;
  visibility: hidden;
  font-size: 15px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  padding: 5px 0;
}

Answer 1

这应该有用......

.crx_mouse_visited:hover .popup {
  visibility: visible;
}

.popup {
  display: block;
  position: absolute;
  z-index: 100;
  visibility: hidden;
  font-size: 15px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  padding: 5px;
}