jquery - マウスオーバーするとテーブルを含むツールチップが表示される画像を作成するにはどうすればよいですか?

Question

私はこれを1日と6時間（文字通り）やろうとしていて、髪を引っ張っています. 私は検索や単語の組み合わせを使い果たし、何かを見逃していないかどうかを確認するために以前にアクセスしたリンクに戻ったことさえありました。

私が必要としているのは、誰かがマウスを画像の上に移動すると、ツールチップが表示されることです。それは私が理解した簡単な部分です。難しいのは、そのツールチップにテーブルを配置して、表示したいものを整理することです。必要なものの正確なレプリカはhttp://occultdarkr.enjin.com/ にあります。マウスを追跡し、サイトのような不透明度を持たせるためにも必要です。

ツールチップにテーブルを追加することになると、多くのことを試しましたが、テーブルが表示されません。ツールチップをシャットダウンして何も表示しないか、テーブルの実際のコードを表示します。本当の痛み。ネットで見つけたjavascriptとjqueryのものを使用してみましたが、必要なものは何も機能しません。

役立つヘルプをいただければ幸いです。

score 2 · Accepted Answer

それには2つの方法があります。そのうちの1つは、以下のようなjquery関数でツールチップを実装できます.

$("p").mouseup(function(){
    $(this).append('<span id='sth'><table><tr><td>foo</td><td>bar</td></tr></table></span>');
}).mousedown(function(){
    $("#sth").remove();
});

次は、次のような jQuery ツールチッププラグインを使用できます。

score 1 · Accepted Answer

最初にテーブルを非表示のdivに配置するか、テーブルデータを表示したいときに動的にdivを作成して(絶対位置...)、次にonmousemoveイベントに関数を追加して、divを変更します位置（マウスの位置にします）とそれを行う必要があります

さらに精度が必要な場合は、お気軽にお問い合わせください。必要に応じて回答を編集します

score 0 · Accepted Answer

以下は、必要に応じて変更できるサンプルコードです。

HTML

<img class="HelpIcon" src="help.png"  title="<table border='1'><tr><td>1</td><td>First Item</td></tr><tr><td>2</td><td>Second Item</td></tr><tr><td>3</td><td>Third Item</td></tr></table>"  />

Jクエリ

$(document).ready(function () {
    var txt = "";
    $('.HelpIcon').mouseenter(function () {
        txt = $(this).attr('title');

        $(this).attr('title', '');
        var offset = $(this).offset();
        var $tooltip = $('<div></div>')
        .attr('id', 'HelpDiv')
        .css('margin-left', offset.left)
        .html(txt);

        $(this).after($tooltip);


    });

    $('.HelpIcon').mousemove(function (e) {
        $("#HelpDiv").css('left',e.pageX);
        $("#HelpDiv").css('top',e.pageY); 
    });

    $('.HelpIcon').mouseleave(function () {

        $('#HelpDiv').remove();
        $(this).attr('title', txt);



    });

});

jquery - マウスオーバーするとテーブルを含むツールチップが表示される画像を作成するにはどうすればよいですか?

3 に答える 3

Related

Reference