ちょっとした動きを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;にします。

マウスオーバーでちょっと何かしたい時に使えるかと思います。