吹き出し型ツールチップの例

下記のリンクやボタンの上にマウスポインタを載せてみて下さい。吹き出しがポップアップ表示されます。
吹き出しのデザイン(CSSファイル)には、デフォルトの配色(半透明の黒色)を採用しています。

リンクの上下左右に吹き出しが表示される例

吹き出しは上側(左寄せ)に表示されます

吹き出しは左上に表示されます

吹き出しは真上に表示されます

吹き出しは右上に表示されます

吹き出しは上側(右寄せ)に表示されます

吹き出しは左に表示されます

吹き出しは右に表示されます

吹き出しは下側(左寄せ)に表示されます

吹き出しは左下に表示されます

吹き出しは真下に表示されます

吹き出しは右下に表示されます

吹き出しは下側(右寄せ)に表示されます

ボタンの上下左右にも吹き出しを表示した例



マウスポインタに追随して吹き出しを表示する例

この枠内にマウスポインタを載せてみて下さい。
マウスポインタのすぐそばに、吹き出しが表示され、マウスの動きに合わせて追随します。
この枠内だけで有効です。
吹き出しとして表示する内容は、この枠を作っている要素に対して、title属性で指定します。

吹き出しの中に、さらに操作可能な要素を含ませた例

この枠内にマウスポインタを載せると、枠の右側に吹き出しが表示されます。
そのまま素早くマウスを右方向に移動させると、(枠から出ても)吹き出しは消えず、吹き出しの内部にマウスポインタを入れられます。
その上で、吹き出しの中に含まれるリンクなどの操作が可能です。

記事本文へ戻る