Filament Group

ツールティップとしての吹き出しエフェクトはWebページでは広く使われるようになったUIのひとつだ。吹き出しの四隅は丸みを帯びて角の外側は透過表示になり、吹き出しを示すための小さい突起がついているところに特徴がある。多くの場合で背景画像がこれらUIを実現するために使われる。

Filament Groupにおいて、これに背景画像を使わずCSSと若干のHTML、それに多少のJavaScriptを使って実現する例がImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?として紹介されている。Filament GroupではjQuery UIウィジェットの開発中にこの問題にあたり、CSSで多角形を描画するためのよく知られたトリックといくつかの工夫を凝らすことでこれを実現したと説明している。

背景画像を使わないで吹き出しエフェクトを実施しようとした理由として、jQuery UI CSS Frameworkの一環で活用するにはテーマに対応する必要があり、さまざまな背景やボーダー、コーナの丸みなどを組み合わせて利用できる必要があるが、背景画像を使うとこれが実現できないためだと説明されている。

Image-free CSS Tooltip Pointers - A Use for Polygonal CSS?におけるデモンストレーションから抜粋

Image-free CSS Tooltip Pointers - A Use for Polygonal CSS?で使われている主なテクニックはCSS多角形トリックを使った三角形の描画と、div要素を入れ子で構成した重ね合わせ描画だ。これで吹き出しの突起部分を表現しつつ、ボーダーラインがあるように見せかけている。

Image-free CSS Tooltip Pointers - A Use for Polygonal CSS?より抜粋

Image-free CSS Tooltip Pointers - A Use for Polygonal CSS?より抜粋

これ以外では色の調整にJavaScriptが使われているほかjQuery UI CSS Frameworkの一部も使われているという。単体としてダウンロードできる形式での提供はなく、動作するというコンセプトプルーフ的な位置づけに近い。しかし反応がよければjQuery UIウィジェットのひとつとして導入される可能性がある。同吹き出しに興味がある場合、Image-free CSS Tooltip Pointers - A Use for Polygonal CSS?のテクニックを検討するか、将来リリースされるjQuery UIに注目しておきたい。