ポップアップをスマートな位置づけにする

Question

テーブルのレガシーコードを作成しています。特定のセルでは、通知アイコンを追加しています。アイコンの上にマウスを置くと、<span>が表示され、いくつかの情報が表示されます。私はこれを<span>のポジショニングについて賢明にすることができますが、良い方法を理解することはできません。私はそれを静的に配置することができますが、テーブルのどのセルにあるかによってページの端に迷うことになります。問題を実演しているJsFiddle hereを実行しました。残念ながら、私はHTML、CSS、バニラJS以外は使用できません。

ほとんどのタグのtitle属性は、その位置についてかなりスマートです。 jsFiddle（ "Hello"を含むセル）の表のセルの1つにタイトルを追加しました。私のスパンに同じスマートな振る舞いを出す方法はありますか？

Answer 1

ポップアップは、要素の前にポップアップhtmlコードを 'div：'の中に 'position：absolute;オーバーフロー：可視;幅：0;高さ：0 '。

'onmouseenter'、 'onmouseleave'が要素で発生した場合、要素の 'none'と 'block'の間でポップアップ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; 
}