マウスクリックのイベントの上と左を取得する

Question

buttonをクリックしたときにtopとleftの位置がcursorになるようにしてpopoverに割り当てます。これを行う目的は、クリックされた位置に正確にpopoverを取得することです。私はclientXとclientYを取得するためにfunctionを呼び出していますhttps://jsfiddle.net/VUZhL/2684/

<a id="example" class="btn btn-primary" rel="popover" (click)="showCords($event)" 
    data-content="This is the body of Popover" 
    data-original-title="Creativity Tuts">pop 
</a> 

ここonclickイベントを参照してください。

しかし、何も動作していないようです。私はbootstrapに新しいです、そして、ちょうどこれがうまくいくかどうか知りません。最悪の部分は、javascriptではなく、JQUERYです。 JSFiddleも基本的なものです。

何か助けていただければ幸いです。事前に

感謝:)

更新：

function showCords(event) { 
    var x = event.clientX; 
    var y = event.clientY; 
    var coords = "X coords: " + x + ", Y coords: " + y; 
    document.getElementById("example").setAttribute("data-content", coords); 
    document.getElementById("example").style.left="x"; 
    document.getElementById("example").style.top="y"; 
    $('#example').popover(); 
    } 

誰かが私がやっている正確な間違いが何であるかを教えてもらえます。私はこのようなことをしようとしていますhttp://codepen.io/rm89/pen/aNOmzQ私のpopoverはbuutonをクリックする位置に来なければなりません。

アップデート2：：

How to open a popover on the mouse click location。上記のリンクの答えは本当に必要ですが、残念ですが、JQUERYにあります。誰かがあなたは、要素の代わりに、(click)にJSFiddle

最初 使用onclickを行く二以下のようなJavaScript関数を作成し、トップを取得またはここ

Answer 1

JAVASCRIPTへの回答を変換で私を助けることができますclientXまたはclientYのままにしてください。eventで変数を取得する場合は、eventではなく$eventとして送信してください。 popover()に表示する場合は、data-contentに設定する必要があります。

function showCords(event) { 
    var x = event.clientX; 
    var y = event.clientY; 
    var coords = "X coords: " + x + ", Y coords: " + y; 
    document.getElementById("example").setAttribute("data-content", coords); 
    $('#example').popover(); 
    }