javascript - マウスポインタをボタンの上に移動したときに、さらに情報を表示するにはどうすればよいですか？

Question

railsv3.2.2とjquery-railsv2.0.2ruby-gemsを使用しています。たとえば、Facebook、Google、その他の企業がアプリケーションで作成しているようなボタンの上にマウスポインタを移動すると、さらに情報が表示されます。

以下は、アプリケーションに実装したいものを示すGoogleGmailのスクリーンショットです。

ここに画像の説明を入力してください

どのようにそして何ができますか？

score 2 · Accepted Answer

CSSやJavaScriptを使用して、これを実現する方法はいくつかあります。基本的なCSSソリューションは次のとおりです。

HTML

<button>Button text</button>
<div class="tooltip">Tooltip Content</div>

CSS

.tooltip { display: none; }
button:hover+.tooltip { display: block; }

score 1 · Accepted Answer

ツールチップライブラリについて考えてみましょう。そのライブラリには、次のようなものがたくさんあります。

ウェブ検索はもっとたくさん出てくるでしょう。

score 1 · Accepted Answer

1

QtipjQueryツールチッププラグインを確認してください。

于 2012-04-18T13:41:56.683 に答える

score 0 · Accepted Answer

titleボタンタグで属性を使用するのはどうですか？

何かのようなもの：

<input type="button" title="your message" value="Button" />

4 に答える 4