jquery - jQuery ツールチップの推奨事項

Question

次のタイプの動作を可能にする jQuery のツールチッププラグインを探しています。

<a href="somewhere.html">
 <span>
  <img src="someimage.jpg" style="display: none;" />
  Here is the tooltip content.
 </span>
 Here is the link to somewhere.
</a>

私が望んでいる動作は、「ここにリンクがあります」にカーソルを合わせると、「someimage.jpg」と「ツールチップのコンテンツはこちら」を含むスパンのコンテンツを示すツールチップがポップアップすることです。

リンク上でのマウスの動きに合わせてツールチップが追跡され、ツールチップの外観 (背景色、不透明度、境界線の色など) が構成可能であることをお勧めします。

私が見つけた 2 つの最も人気のあるツールヒント、"clueTip" と Jörn Zaefferer の "Tooltip" は、私が何かを見逃していない限り、法案に適合していないようです。

最終的に、リンクと画像は動的に生成されます。

score 18 · Accepted Answer

OHHHHHHHH 史上最高！

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

デモ: (すべてのニーズを満たす「Yahoo へのリンク」の例を探してください)

http://jquery.bassistance.de/tooltip/demo/

編集: Jorn (彼の名前は知りませんでした) について言及したようですが、"yahoo" の例を探してください。

score 5 · Accepted Answer

5

私はの大ファンですBeautyTips

于 2009-02-12T21:17:23.493 に答える

score 4 · Accepted Answer

jqueryである必要はありますか？必要に応じて、CSS だけで行うこともできます。

a.info
{
    position: relative;
    z-index: 24;
}

a.info:hover
{
    z-index: 25;    
}

a.info span
{
    display: none;
}

a.info:hover span
{
    display: block;
    position: absolute;
    top: 2em;
    left: 2em;
    width: 15em;
    padding: 6px;
    border: 1px solid black;
    background-color: #eeeeee;
    color: #000;
}

その後、そのままお使いいただけます。

<a href="somewhere.html" class="info">
 <span>
  <img src="images/someImage.jpg" />
  Here is the tooltip content.
 </span>
 Here is the link to somewhere.
</a>

編集

私の毎日のブログを読んで、この記事が私の注意を引きました。彼らはあなたが望むことをするjqueryプラグインを作成し、スタイルオプションとマウスの動きで画像をポップアップします. 結果はこちらをご覧ください。

http://james.padolsey.com/demos/imgPreview/full/

チュートリアルに従ってプラグインを作成するか、サンプルプラグインをダウンロードできるはずです。

score 2 · Accepted Answer

これにより、必要なものをツールチップボックスに入れることができます。
http://code.google.com/p/next-msg/

さらに、テーマがあります ここに画像の説明を入力してください

score 2 · Accepted Answer

2

qTip - 間違いありません

こちらもご覧ください

于 2011-09-29T19:59:10.360 に答える

score 1 · Accepted Answer

これは、ほとんど何でもできるjQueryツールチップです。見た目も素晴らしいです。

ヒント： http：//projects.nickstakenburg.com/tipped

score 1 · Accepted Answer

Likno Web Tooltips Builder というツールを試すこともできます: http://www.likno.com/jquery-tooltips/index.php

score 1 · Accepted Answer

1

単に最高の http://flowplayer.org/tools/tooltip/index.html

于 2011-02-04T15:24:53.940 に答える

score 1 · Accepted Answer

これは私が使用する素晴らしいものです。位置とマウスのフォローのオプションがあり、箱から出してすぐに使えるテーマがたくさんあります。http://www.websanova.com/plugins/websanova/tooltip

score 0 · Accepted Answer

また、ツールチップ用の jQuery プラグインも作成しました。これは非常に小さく、5 KB に縮小され、セットアップと使用が非常に簡単で、多くの構成オプションがあります。垂直/水平スクロール、またはウィンドウサイズに関係なく、ヒントをビューポート内に配置します。幅と背景色は初期化時に変更できます。画像は一切使用しませんでした - すべてのファンシーなものに CSS を使用し、古いブラウザーでは適切に機能を低下させます。IE6でも動作します:)そして、デフォルトでは、次のようになります。

スクリーンショット

score 0 · Accepted Answer

jQuery UI にツールチップモジュールが組み込まれました: http://jqueryui.com/tooltip/

うまく機能し、簡単にカスタマイズできます。

score 0 · Accepted Answer

これを使用することを考えました： http://www.codylindley.com/blogstuff/js/jtip/

そしてこれ： http://onehackoranother.com/projects/jquery/tipsy/

推奨される他のものは、あなたのニーズにより適しているかもしれません

score 0 · Accepted Answer

0

ClueTip をお勧めします。//bassistance.de/jquery-plugins/jquery-plugin-tooltip/ )。

于 2011-05-02T09:38:56.870 に答える

jquery - jQuery ツールチップの推奨事項

15 に答える 15

Related

Reference