ちょっとした動きをJavaSciptなしで実装できないかと思い、
CSSのみで吹き出しの表示・非表示を作成しました。
ブラウザはChrome、Firefox、IE9以上で確認しています。
サンプル
罫線で囲まれた「ここをマウスオーバーすると・・・」をマウスオーバーすると右上に吹き出しが表示されます。
See the Pen aNgEOj by yuri nagamatsu (@nagamatsu) on CodePen.
マウスオーバーの動きは隣接セレクタで指定する
罫線で囲まれたエリア(p.text)と吹き出し(p.fukidashi)を隣接させます。
隣接クラスタは、同じ階層の要素で直後にあるものにCSSを適用し、プラス記号 (+) で記述します。
ページを読み込んだ時は吹き出しをdisplay: none;で非表示にしており、
罫線内をhoverでdisplay: block;になり表示されます。
hover時の指定
.text:hover + .fukidashi {
display: block;
}
※この「.text:hover + .fukidashi」が隣接クラスタの記述で、
.textをhoverした時の.fukidashiをdisplay: block;にします。
マウスオーバーでちょっと何かしたい時に使えるかと思います。