/* マウスを乗せたときに「上に出る黒いテキストボックス」。
*
* ── 何のためのものか ──
* このアプリのホバー表示は2種類あり、見た目で役割を分けている
* （2026-09-01 ユーザー指示）。
*
* 黒いテキストボックス（このファイル）
* **意図的にマウスを乗せて「詳しい中身」を読むもの。**
* 要確認の理由（Beds24のメモ）・フロントからの依頼文・清掃員の提出内容と
* 備考・清掃状況（清掃中／清掃完了）など、その場の判断に要る情報。
*
* 白いOS標準の吹き出し（ネイティブ title 属性。ここでは扱わない）
* 「クリックすると外します」のような**操作方法の案内**。
* 読まなくても操作できる補助なので、目立たせない。
*
* ネイティブ title を詳細表示に使わないのは、**マウスカーソルの下に出て
* 文字がカーソルに隠れる**うえ、表示まで1秒ほど待たされるため。こちらは
* 要素の真上に即座に出る。
*
* ── 使い方 ──
* 出したい要素に `data-tip="本文"` を付けるだけ（改行は \n）。
* このファイルを読み込んだページなら、どの要素でも効く。
*
* 要確認
*
* 画面の上のほうにある要素は、上向きに出すとツールチップが画面の外に出て
* 読めない。`js/lib/tooltip.js` の `initTipFlip(root)` を1度呼んでおくと、
* 余白が足りない要素に `.tip-below` を付けて下向きに出し分ける。
*
* ── 注意 ──
* ・**入れ物に overflow:hidden を付けない。** 付けると、上に飛び出した
* ツールチップが枠で切られて途中までしか読めない（house.css の .day、
* dashboard.css の .card に同じ注意書きがある）。
* ・**overflow:hidden の要素には付けない。** 自分自身の擬似要素なので、
* 枠で切られて出なくなる。文字を省略記号（text-overflow）で詰めたい要素に
* 付けたくなりがちなので注意。外側の要素に付け替えて逃がす。
* ・`