ポインタの位置ではなく、ツールチップが左上に表示されるのはなぜですか？

Question

私のasp.netアプリケーションに埋め込んでいるすべてのビューは、マウスがホバリングしている場所とは対照的に、vizの左上にツールチップを表示します。これを修正/変更するにはどうすればよいですか？ 手/マウスの隣にボックスが表示されます。場合によっては、ポップアップでオプションを選択することができません。その理由は、マウスから離れすぎて、ボックスに移動すると、アイテム上にホバーしなくなり、ボックスが閉じます。

場所がゼロになっていますが、マウスの位置を使用するにはどうしたらいいですか？

<div class="tab-tooltip tab-widget tab-tooltipBR" style="left: 0px; top: 0px; display: block; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; "> 

iframeとの直接リンクを試みましたが、起こりません。これは、トラステッド接続を使用し、javascriptを使用してvizをdivタグにロードする場合にのみ行います。

また、javascriptを使用して直接リンクするので、JSとの開始方法と関係があります。私は例からコードを取ったので、何が間違っているのか分かりません。

<div id="tableauViz" style="width:100%; height:100%; min-height:900px"></div> 

if(viz) viz.dispose(); 
var placeholderDiv = document.getElementById("tableauViz"); 
var url = 'https://#####.com/trusted/' + ticket + _tabpath; 
var options = { 
       width: placeholderDiv.scrollWidth, 
       height: placeholderDiv.scrollHeight, 
       hideTabs: false, 
       hideToolbar: true, 
       onFirstInteractive: function() { 
        workbook = viz.getWorkbook(); 
        activeSheet = workbook.getActiveSheet(); 
        //apply filters .... 
        } 
       } 
viz = new tableauSoftware.Viz(placeholderDiv, url, options); 

プロジェクトからすべてのCSSを削除しましたが、それでも左上にロードされます。

https://community.tableau.com/thread/218147

Answer 1

私は私の例ではjQueryを使用していますが、それはあまりにも通常のJavaScriptで作ることができます。

文書の準備が整い、サーバーが設定しているCSS上で、ツールチップ要素のCSSを設定することです。

$('.content').on('mousemove', function(e) { 
    $('.tooltip').css({ 
    top: e.pageY, 
    left: e.pageX, 
    display: 'block' 
    }); 
}); 

$('.content').on('mouseout', function() { 
    $('.tooltip').css({ 
    display: 'none' 
    }); 
}); 

あなたはそれがどのように動作するかを見ることができるように、私はあなたにすべてのコードとフィドルを残しておきます：https://jsfiddle.net/emwovbmv/55/そのために我々は（それが文書準備に行う必要があり、覚えておいてください）次のjQueryコードを使用します（動作を確認するには、マウスを灰色の四角内に移動します）。

Mousemoveはマウスセンターよりも邪魔ですが、マウスの位置を常に追跡して、ツールチップがそれに従って動くようにします。

あなたのために働くのか、それとも疑問がある場合は教えてください。