4

カーソルが要素の上に置かれたときにツールチップを表示するための JQuery コード サンプルまたはライブラリを探しています。具体的には、私がやりたいことは、ホバー時に独自の <div> 要素を表示することであり、ホスト要素から自動的に構築またはロードされたツールチップではありません。私はいくつかの JQuery ツールチップ プラグインを見てきましたが、それらはすべてこれを行うことができないようですが、他の点で非常に複雑です。これは、数行の JS/JQuery で実行できるように思えますが、実際に機能するチュートリアルを見つけることもできませんでした。

理想的なソリューションは、境界近くのツールチップを処理し、「スティッキー ツールチップ」オプションを持ち、(HTML/JS のインラインではなく) AJAX を使用してツールチップとして表示される HTML を読み込むオプションを持ち、適切に処理することです。多数のツールチップ (もちろん一度に 1 つだけ表示されます)。

4

6 に答える 6

0

コンテンツの外部リソースの非同期ロードを使用して、ajax モードでもうまく動作できるようにするjTipが本当に気に入っています。

于 2009-01-24T09:09:25.980 に答える
0

さて、ようやくこれを再検討する時間ができたので、ここに落ち着きました。全体的にとても満足しています。私が気付いた唯一の問題は、ウィンドウの右下隅にツールチップを持つ要素がある場合、ツールチップが要素とウィンドウの境界線の間に表示される余地がなく、その上に表示されることです。要素とポップアップの間でフォーカスが変わると、要素がちらつき始めます。これを解決するためのヒント、または私の JS スタイルに関する一般的なコメント (私は以前にほとんど JS コードを書いたことがありません) を歓迎します。

JavaScript 関数:

function showInfoBox(parent_index, parent) {

var parent_id = $(this).attr('id');
var infobox_id = parent_id+"_ib";
$("body").append("<div class='infobox' id='"+infobox_id+"'><p>This is an infobox for "+parent_id+"</p></div>"); //customize here
var infobox = $("#"+infobox_id);

$(this).mousemove(function(e){
    var pad = 10;
    var x = Math.min(e.pageX + pad, $(window).width() - infobox.width() - pad);
    var y = Math.min(e.pageY + pad, $(window).height() + $(window).scrollTop() - infobox.height() - pad);
    infobox.css({
        top:  y + 'px',
        left: x + 'px'
    });
})
    .hover(function(){
        infobox.show();
    }, function(){
        infobox.hide();
    });

};

ドキュメントの読み込み時に呼び出す JQuery:

$(".SELECTOR-FOR-STUFF-TO-GET-INFOBOXES").each(showInfoBox);

必要な CSS:

.infobox { display:none; position:absolute; z-index:999; /* more CSS if you like */}
于 2009-02-01T07:47:44.833 に答える
-1

Jquery waqzah.wordpress.comのシンプルなツールチップ

于 2009-06-25T04:07:24.930 に答える