画像やJavaを使わずCSS3だけでオブジェクトのホバー時に補足テキストの吹き出しを作ることができます。

『:hover』にも『:before』『:after』が有効ですので、マウスオン時にだけ表示さたい場合は『:hover:before』もしくは『:hover:after』とします

考え方としては『:before』で角丸長方形のブロック要素を作りその下に『:after』で下への出っ張り部分を作ります。

また、要素を三角形にする方法は『height』と『whidth』を『0』にして『border:』で一括指定でプロパティ『transparent』を指定し透明のborderを回します。

その直後、border-topを指定しtopのプロパティだけ上書きすれば吹き出しの完成です