ツールチップで改行 :: 872 Style
  1. TOP
  2. MEMO
  3. WEB
  4. ツールチップで改行

ツールチップで改行

ツールチップとは・・・

　Windowsにおいて、マウスポインタの下に適宜表示される小さな説明窓のこと。
　ブラウザで表示したHTMLファイル上のリンクをマウスでポイントした際や、アプリケーションのアイコンをマウスでポイントした際などに表示されることがある。

使い方

SPANタグとかFONTタグで囲んで、title属性に表示したい文章を入れるだけ。

<span title="ここにもじをいれるのだ！">
ここにもじをいれるのだ！
</span>

TEST 1

こんな風にしてあげれば、その場所にカーソルを持っていけば、ポップアップします。
imgタグの場合には、titleではなくて、altで囲みましょう。

ツールチップの改行

　普通にツールチップを表示させてもいいんですが、ちょっとお洒落さんにおすすめの小技として、改行なんてもんがあります。
使い方は簡単で、改行したい場所に『&#13;』を記入してあげるだけ。

<span title="ここに 文字を&#13;入れるのだ！">
ここに文字を入れるのだ！
</span>

TEST 2

Firefoxでの改行

　残念ながら Firefox では改行しません。

　このようなAjaxのツールチップなどもあるので、使ってみてはいかがでしょうか？
参考：Sexy ToolTips

BACK