オンマウスで解説が浮き出るようするには？

質問

WEBサイトで、テキストの中の単語にマウスを置くと、その単語の解説が小さなフキダシのように
出てくる(そしてマウスを離すと消える)ようにしたいのですが、こういうものをなんと呼ぶのかわからず、なかなか検索もうまくゆきません。

javascriptではないかと思うのですが、このような物をなんと呼ぶのか、検索単語のヒント
あるいはこのような方法を解説しているサイト等ご存知でしたらお教えください。

回答No.2

neko-ten · ベストアンサー

ツールチップ(ToolTip)スねー。
最近の流行ではJavaScript実装が多いッス。
http://kachibito.net/web-design/13-make-balloon-js.html

お礼

「ツールチップ」というのですね。
まさにこれです。ありがとうございました！

回答No.1

4017B

単純に普通のHTMLで可能です。

<p>マウスを<span title="ポップアップで説明文が表示">ここ</span>に乗せると説明が表示されます。</p>

～以上の様な例文で可能です。

この場合は「title」という属性タグを、任意のタグにオプション的に付加する事によって、いわゆる簡易的な説明文をフキダシ表示のように表示させる効果があります。一部、対応出来ないタグもありますが、通常よく使われる文書用のタグ（p、div、span、b、a、strong、em～等々）なら、ほとんど対応してます。

JavaScriptで処理する場合は、適用させたい部分にやはり<span>を適当に割り振って、その中に onMouseOver/onMouseOut を付加します。ただし結局は何らかの属性値を割り振って、それをJavaScriptで書き換える処理になるので、やってることは前述のtitle属性と同じです。

なのでよりグラフィカルなポップアップを出すとか、半透明にするとかの特殊な効果を期待しない限り、通常は前述のtitle属性を付加させることで処理します。

より詳しい解説を探す場合には、

＞http://www.google.com/search?hl=ja&safe=off&q=JavaScript+%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97+%E8%AA%AC%E6%98%8E%E6%96%87&oq=JavaScript+%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97+%E8%AA%AC%E6%98%8E%E6%96%87&aq=f&aqi=&aql=&gs_sm=e&gs_upl=4691l7130l0l8557l3l3l0l0l0l0l100l292l2.1l3

～で探してみて下さい。

お礼

こんなシンプルな方法もあったのですね！
ありがとうございます