2

StackOverflow のホバー効果が大好きです。

ここに画像の説明を入力

Web アプリケーションで同様の機能を使用したいと考えています。誰か教えてくれませんか？この機能は何と呼ばれていますか? これに利用できるライブラリはありますか？私はjQuery Tooltipを使用しましたが、それには感銘を受けませんでした。

現在、かなり古いアプリケーションでoverLibを使用しています。

編集:ここでは印象が良くありません。スタックオーバーフローのようなマウスオーバー効果が欲しいだけです。

4

5 に答える 5

3

新しい 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

少しのデザインで、それはあなたが望むものです。

于 2012-11-02T10:00:54.790 に答える
2

私はこれが古いことを知っていますが、私は同じものを探していました.そして...誰かが実際に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>
  • 「coolTip」クラスをツールチップ div に割り当てます。
  • また、ホバーしたい要素に設定されたクラスに一致する ID を割り当てます。
  • ページの読み込み時に実行coolTips()します。

上記の例のツールチップ div の内容は、使用法を示すためのものであることに注意してください。StackOverflow 風のフォーマットされたツールチップを作成するには、jsbin リンクに示されているように、ツールチップのコンテンツに HTML タグを使用する必要があります。そこに示されているすべての CSS も必要です。

楽しみ ：）

更新:ツールチップがウィンドウの境界からはみ出すかどうかをチェックするようになり、その場合は代わりに右または下からアニメーション化されます。

于 2014-05-10T07:28:57.127 に答える
0

このプラグインを見てください。これを使用すると、stackoverflow と同じ効果が得られます。 ここをクリック

于 2012-11-02T09:37:14.900 に答える
0

(link)を使用して自分で作成するだけです。html を追加し、必要に応じて css をカスタマイズします。

于 2012-11-02T09:39:50.973 に答える
0

.animatejsfiddel http://jsfiddle.net/qJ8NB/1/で作成したこのデモのように使用できます

div に素敵な css を追加するだけで、SO のように見せることができます。

ここに更新があります http://jsfiddle.net/qJ8NB/11/

于 2012-11-02T09:54:05.653 に答える