ツールチップ・吹き出しヒントのCSS素材

マウスを乗せたときと、キーボード（Tabキー）で選んだときに出ます。出る向きは cs-tt01--top --bottom --left --right のクラスで選びます。id と aria-describedby は1つずつ違う名前にしてください。

入力欄の見出しの横に置く、小さな「？」です。スマホでは「？」を押すと出ます（押した後にほかの所を押すと消えます）。

文章の中の難しい言葉に点線を引き、マウスを乗せると説明が出ます。言葉は tabindex="0" でキーボードでも選べるようにしてあります。白い吹き出しなので、説明が長くても読みやすいです。

HTMLの popover 属性を使っているので、JavaScriptなしで押して開き、外側を押すかEscキーで閉じます。ボタンの真下に出す位置合わせには新しい「アンカー配置」を使っていて、対応していないブラウザでは画面の下に出ます。1ページに2つ以上置くときは、id と anchor-name を別の名前にしてください。

アイコンだけのボタンに、aria-label の文字をそのまま吹き出しにして出します。文言を1か所に書くだけで、読み上げと見た目の両方に使えます。少し待ってから出るので、マウスを横切っただけでは出ません。

金額の横の「内訳」にマウスを乗せると、小さな表が出ます。吹き出しの中にマウスを移しても消えないようにしてあります。下の余白（margin）は吹き出しが隠れないための見本用です。

入力欄を選んでいるあいだだけ、横に入力のヒントが出ます。画面の幅が狭いときは、入力欄の下に出ます。aria-describedby で入力欄とヒントを結んでいるので、読み上げソフトでもヒントが読まれます。