Webページにツールチップを出すには？

1. ツールチップ要素に、以下のスタイルをあてておく。

   position: absolute;
   box-shadow: 3px 3px gray;
   z-index: 適当な大きな数;
   

2. 一旦、適当な位置指定で配置
3. getBoundingClientRectで配置位置を得る
4. 本当に配置したい位置との差分を計算して、位置指定して配置

コード例

See the Pen ToolTip Test by large.town.sky (@TownLarge) on CodePen.

解説

position: absolute;

他の要素と無関係な場所に絶対位置配置するために指定します。

absolute以外にfixedでも似た効果を出せます。
スクロールした場合、absoluteはページと一緒に移動するのに対し、fixedは位置が変わりません。

fixedの場合、画面外にはみ出た場合にスクロールしてもアクセスできなくなる事にご注意ください。

box-shadow: 3px 3px gray;

ページ本体から浮いている視覚効果を出すための影を付けるスタイルです。

サイズやぼけ効果や色などが調整できます。

z-index: 適当な大きな数;

たいていの場合は、指定しなくても動作します。他のページ要素にz-indexを指定している場合は、親要素も含めて負けない大きな値を指定する必要があります。

なぜ２度位置指定するのか？

absoluteやfixed で位置指定する場合の基準座標系は複雑です。

• 親要素を辿っていき、一番近くにある包含ブロックを基準とする
• 包含ブロックが無い場合、初期包含ブロックを基準とする

包含ブロックは、以下のいずれかの条件を満たす要素

• positionがstatic以外
• transform または perspective の値が none 以外
• will-change の値が transform または perspective
• filter の値が none 以外、または will-change の値が filter (Firefox のみ)
• contain の値が paint

厳密に計算するには、この様な複雑な仕様通りに基準座標系を計算する必要があります。それだけでなく、初期包含ブロックを正確に取得するのが困難です。

初期包含ブロックは、多くの場合ビューポートですが、そうでない場合もあります。

このため、たまに間違う複雑な計算をするより、仮に配置して、ずれを補正する方が確実です。実際に、初期包含ブロックが謎領域なため、ノート・リンク付与アプリが誤動作して、とんでもない場所にツールチップを出しているページがありました。（修正済み）