HTML/CSSスパンポップアップ表示が応答しない

Question

p、h1などにカーソルを置くと、その要素のfont-familyでポップアップが表示されるChrome拡張機能を作成しようとしています。大部分は機能しますが、以下の図に示すように、正しく表示されないことがあります。

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