HowToRead

Adopted在本 repo 設計、production 已採用。站上是設計端的版本，production 實作可能已再調整。

Production：src/components/AssetPrediction/source/HowToRead/HowToRead.tsx

Installation

import { HowToRead } from "@/components/product/how-to-read/how-to-read";

Overview

分析模組上的「How to read」入口。解釋這張圖到底在畫什麼、資料哪裡來、記號代表什麼 —— 但不為此永久佔用版面高度。

泡泡本體就是 @olab 的 Tooltip，沒有改。原型手刻 ::after 泡泡是因為 standalone HTML 沒有組件庫可用，那不是要沿用的設計決策。我們自己的只有 trigger，兩種形狀：

icon —— Tooltip 自己的 trigger，裡面放 16px 問號。預設。不佔版面。
pill —— @olab Button（skin=outline、size=sm）當 trigger，透過 Tooltip 的 asChild 接上。 Button 本身就是那顆 pill：h-7 / px-3 / rounded-full，不需要手刻。給密度高到裸問號會被忽略的模組用。

Tooltip 同時支援 hover 與點擊開合（Ark UI 行為），沒有指標裝置也讀得到。

Interactive Demo

icon — 卡頭標題旁（實際用法）

Volume profile

pill — 帶標籤

Prediction-market consensus

pill — 自訂標籤

上面三個都是真的可以 hover / 點開的 —— 泡泡的 hover、pressed、開合行為全部由 @olab Tooltip 提供，本組件不覆寫任何 interaction state。

Static State Matrix

variant — icon / pill / pill 自訂標籤（皆為真組件）

這裡不模擬 hover / pressed。pill 的 trigger 是 @olab Button（skin=outline），它的 rest / hover / pressed / selected / disabled 完整矩陣在 /live/button 已經有了 —— 在這裡再畫一份手繪版，只會多出一份會跟 Button 漂開的假圖。icon 版則沒有自己的 state：它是 Tooltip 原生 trigger 裡的一個 16px 字符，rest 與 hover 同為 text-primary，回饋靠游標形狀與泡泡出現。

baseline 對齊 — icon 必須對齊標題基線而不是置中

短標題

會換行的長模組標題名稱

窄容器 — pill 不縮，換行到下一列

Volume profile

Implementation Notes

來源：../opinion-labs-archive/prototypes/assets-forecasting/btc-dashboard-spike-v1.html 的 .howto-link / .howto-pill。

刻意偏離原型 —— 一律以 production 組件為準

泡泡外觀：原型是 bg-primary + border-secondary、無箭頭；這裡用 @olab Tooltip 的原生外觀（bg-primary + brand 描邊）。再手刻一份等於把 drift 帶進來。
pill 的邊框是白色不是灰色。原型 .howto-pill 用 border-secondary + text-tertiary； Button 的 outline skin 用 border-white（role token，dark 解析成白）。這是用真 Button 必然繼承的樣子 —— 想要灰框就得改 Button 本體或加 skin，不在這裡用 className 蓋掉。
pill 字級：原型 12px，Button sm 是 text-bodyM（14px）。同上，照 Button。
showArrow=false —— 這是唯一給 Tooltip 的參數。箭頭指向 16px 的問號會蓋住 icon 本身。

已知缺口

Tooltip 的 max-w-xs（320px）剛好等於原型 pill 版的寬度，但 icon 版原型是 300px。差 20px，未特別處理。