StackOverflow のホバー効果が大好きです。
Web アプリケーションで同様の機能を使用したいと考えています。誰か教えてくれませんか?この機能は何と呼ばれていますか? これに利用できるライブラリはありますか?私はjQuery Tooltipを使用しましたが、それには感銘を受けませんでした。
現在、かなり古いアプリケーションでoverLibを使用しています。
編集:ここでは印象が良くありません。スタックオーバーフローのようなマウスオーバー効果が欲しいだけです。
StackOverflow のホバー効果が大好きです。
Web アプリケーションで同様の機能を使用したいと考えています。誰か教えてくれませんか?この機能は何と呼ばれていますか? これに利用できるライブラリはありますか?私はjQuery Tooltipを使用しましたが、それには感銘を受けませんでした。
現在、かなり古いアプリケーションでoverLibを使用しています。
編集:ここでは印象が良くありません。スタックオーバーフローのようなマウスオーバー効果が欲しいだけです。
新しい jQuery UI ツールチップは非常に優れています: http://jqueryui.com/tooltip/#custom-style
アニメーションは制御可能で、ツールチップはスタイル可能で、ツールチップのように StackOverflow をほとんど模倣できます。
「カスタムスタイル」の例をリンクしたことに注意してください。ツールチップのカスタム スタイルを作成する方法を示します。
また、デフォルトでは、ツールチップには要素の title 属性が表示されます。例があります: http://jqueryui.com/tooltip/#custom-contentカスタム コンテンツがさまざまな方法で設定され、いくつかのオプションが表示されます。
どの機能が欠けているのかわかりません。
編集: カスタム コンテンツのデモはサンプル サイトで盗聴されています。フル ページ ビューで確認してください: http://view.jqueryui.com/menubar/demos/tooltip/custom-content.html
EDIT2:新しいソリューション
Anton's answer を見て、元の div 内にツールチップの div を追加し、hoverintent を導入することで、これを正しく行うことができると思いました。また、コードを少しサニタイズする必要がありました。チェック: http://jsbin.com/anegip/2/edit
http://jsbin.com/anegip/3/edit
少しのデザインで、それはあなたが望むものです。
私はこれが古いことを知っていますが、私は同じものを探していました.そして...誰かが実際にStackOverflowのタグツールチップのように見えるものを望んでいる場合に備えて.
デモ: http://jsbin.com/korehubi/10
コード: http://jsbin.com/korehubi/10/edit
StackOverflow のコードをたどって丹念に再現しました。
使用法:
<div class="firstElement">The thing to hover over.</div>
<div class="coolTip" id="firstElement">This is the tooltip content.</div>
coolTips()
します。上記の例のツールチップ div の内容は、使用法を示すためのものであることに注意してください。StackOverflow 風のフォーマットされたツールチップを作成するには、jsbin リンクに示されているように、ツールチップのコンテンツに HTML タグを使用する必要があります。そこに示されているすべての CSS も必要です。
楽しみ :)
更新:ツールチップがウィンドウの境界からはみ出すかどうかをチェックするようになり、その場合は代わりに右または下からアニメーション化されます。
このプラグインを見てください。これを使用すると、stackoverflow と同じ効果が得られます。 ここをクリック
(link)を使用して自分で作成するだけです。html を追加し、必要に応じて css をカスタマイズします。
.animate
jsfiddel http://jsfiddle.net/qJ8NB/1/で作成したこのデモのように使用できます
div に素敵な css を追加するだけで、SO のように見せることができます。
ここに更新があります http://jsfiddle.net/qJ8NB/11/