HTML/CSS span popup display not responsive

I am trying to make a Chrome extension that, when hovering over a p , h1 , etc, will display a popup with that element's font-family . It works for the most part, but doesn't display correctly sometimes, as shown in pictures below.

How can I set up the CSS styles such that it will position itself absolutely and will always expand to fit the text AND be fully visible? The extension works by using appendChild to add a span containing the hidden popup to the current element.

Notice how in the second picture,the popup is cut off because of the constraints of its parent.

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;
}

---

这应该工作...

.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;
}

链接地址: http://www.djcxy.com/p/83660.html

上一篇: 在bootstrap中隐藏特定的li

下一篇: HTML / CSS弹出窗口显示不响应