JQueryを使用すると、ホバー上でテキストが表示されます

Question

マウスの上にマウスを置くとテキストが表示されるグラフがいくつかあります。以下のCSSで

<article class="basic_metrics"> 
    <h2>Basic Metrics</h2> 
    <p id="number_of_loans"></p> 
    <p id="total_loan_originated"></p> 
</article> 

：

.basic_metrics{ 
    height: 100px; 
    width: 100px; 
    display: none; 
    z-index: 1; 
} 

あなたが見ることができるように、ディスプレイがnoneで最初に私は私のテキストの構造を定義しました。それから私は、この機能で私を助けるために、いくつかのjQueryを持っている。そして、

  $(document).ready (function() { 
       $(document).on("mouseenter", "svg", function() { 
        console.log("mouse enter"); 
        $(this).css("opacity","0.5"); 

        $("#number_of_loans").empty().append("Number of Loans: " +10000); 
        $("#total_loan_origination").empty().append("Total loan originated: " + 1000); 
        $(this).append($(".basic_metrics").css("display","block")); 


       }).on('mouseleave', 'svg', function() { 
        console.log("mouse leave"); 
        $(this).css("opacity", "1"); 
       }); 
      }); 

点検メニューからarticleは、親クラスに適切に追加されますんが、何も現れません。

青いハイライトの周りを見てください、あなたはdisplay: blockでarticleタグに気づくでしょう。私はそれがz-インデックスと関係があると思ったが、私はそれを加えたが、まだ動作しない。何か案は？

編集：グラフはD3.jsライブラリによって生成されています。

Answer 1

イベントハンドラの引数とコードからsvgを削除します。

サイドノート：あなたのarticleで、あなたはtotal_loan_originatedとして識別された第2の段落を持っていますが、あなたのJavaScriptで、それがtotal_loan_originationと呼ばれています。

svgに追加されないworking test fiddleがあります。

更新：テキストボックスが正しく削除されていません。 This updated fiddleが削除されます。