要素の相対位置で吹き出しを表示したかったが

javascriptで吹き出しを表示するときの話です。

ココとかコレとか
大体マウスオーバーの座標を起点にして吹き出しが表示されるようです。

もっと単純にa要素とかimg要素とかからの相対位置で表示させればいいじゃん

と調べてみると

なるほど
要素の絶対位置を直接取得することは出来ないので（各要素の幅や高さを加算してゆく方法もあるが大変な上に確実じゃない）、相対位置もまた取ることができないんスね。

吹き出しを表示させたい要素をブロック要素で囲んで、ブロック要素の相対座標を使って表示する方法もやってみましたが、面倒だし、汎用性に欠けるし、あんまり面白くない。

しかしながら、マウスオーバーされた瞬間に吹き出しを表示すると、吹き出しの口があまり自然じゃない位置に来てしまうという問題がある。

うーん、仕方ないので

• マウスオーバーから一瞬間を置いて吹き出しを表示する。
• 吹き出し表示中にマウスを動かすと、吹き出しがマウスを追跡する。

この辺を複合させて誤魔化してみるか。

仕事だと、普通なら簡単にあきらめるところを調べざるを得ないので、勉強になりますね、と。