3


0

マウスオーバーしてクリックできるJavascript / CSSツールチップ

私は次のことができるjavascript / cssツールチップを探しています:

  1. ページ要素(ヘルプアイコンなど)にカーソルを合わせると表示されます。

  2. ブラウザウィンドウに基づいて自分自身を再配置します(たとえば、 ページの右端にある場合、ページ要素の左側に表示されます。それ以外の場合は、ページ要素の右側に表示されます。 そうすれば、ページから消えることはありません。)

  3. ツールチップにカーソルを合わせると、ツールチップは消えません。 このように ツールチップ内のテキストを選択するか、ハイパーリンクをクリックします。

私は道場を使用していますが、そのdijitツールチップは、他のdijit要素(最も一般的にはdijitボタン)からしか生成できないため、非常に柔軟性に欠けるようです。 jqueryやprototypeのような他のjavascriptフレームワーク全体を参照する必要はないので、誰かが1つの基本的なスクリプトを使用してこれを行う方法を持っていることを願っています。

5 Answer


2


残念なことに、Dojoで利用できるツールチップスタイルのプラグインは、他のフレームワーク(つまり、jQuery)の近くにはありません。 このため、次の3つのオプションがあります。

*車輪を再発明します。*他のツールチップスクリプトから学んだことを取り入れ、独自のスクリプトをゼロから構築します。 このオプションは、最も長い開発時間を必要とします(そして、ブラウザー間のバグの避けられないメンテナンスにおいて)。

既存のプラグインを拡張します。 dojoの現在のツールチッププラグイン(またはライブラリに依存しないプラグイン)を取得し、独自のスクリプトを追加することで機能を拡張できます。

  • jQueryを使用します。*これはすでに他の人によって2回言われていますが、もう一度言います。 jQueryにはプラグインエコシステムが盛んで、開発/メンテナンス時間が本当に重要な場合は、jQueryを必ず検討する必要があります。


1


jQueryを使用することに決めた場合、qTipは非常に構成可能で、おそらくあなたのニーズを満たす素晴らしいjQueryプラグインです。 http://craigsworks.com/projects/qtip/


1


繰り返しになりますが、jQueryの使用を気にしないと仮定すると(すごい!!)いくつかのツールチップをいじってみて、これが最高であることがわかりました:http://flowplayer.org/tools/tooltip/index.html

優れたドキュメントで拡張可能。 「position」設定オプションをチェックして、それが必要なことを行うかどうかを確認します。

がんばろう!


1


jQuery TOOLS、Beauty Tips、Cluetipなど、いくつかのjQueryプラグインを使用しています。 3つすべてが要件を満たしていると思います。

ブラックボックスではなく、何が起こっているのかを知りたい場合は、このチュートリアルをお勧めします。

(そしてコメントのセクションを見てください)


0


dijit.Tooltip documentationには2つの簡単な例があります。最初のツールチップを単純なDOMノードに添付すると、ニーズを満たすようです。 2つ目は、ツールチップを別のdijitベースのウィジェット(ボタン)に結び付けることです。 プロパティconnectIdは、domノード参照または文字列IDを受け取ることに注意してください。 dijitは、プログラムで使用することも、マークアップベースの宣言を使用して使用することもできます。

異なるツールチップの実装には異なる機能があります。 特に、dijit.Tooltipは、スクリーンリーダーのARIAアクセシビリティ、キーボードアクセス、双方向の有効化、およびノー​​ドの周囲であるが画面の境界内での自動配置を提供します。