ガイドライン
Anatomy: 解剖図
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Container | ツールチップのコンテナ要素 | — | |
| 2 | Label | ツールチップにコンテキストを付与するためのテキスト要素。 | — | |
| 3 | Arrow | ツールチップが帰属する要素の位置を示すための要素。 | — |
Options: 選択肢
side
top (Default)
任意の要素の上部にツールチップを表示するオプションです。
bottom
任意の要素の下部にツールチップを表示するオプションです。
left
任意の要素の左側にツールチップを表示するオプションです。
right
任意の要素の右側にツールチップを表示するオプションです。
Behaviors: 振る舞い
オフセット
ツールチップはツールチップと要素との間が16px開いた状態で表示されます。
positionのオプションをいずれの値に変更した場合でも必ず16pxのオフセットが設けられます。
配置の自動調整
ツールチップが表示領域からはみ出す場合はツールチップが見切れない位置にレイアウトされます。
また、指定されたpositionの方向に十分なスペースが確保された場合は元の位置にレイアウトされます。
最大幅
ツールチップの最大幅は、日本語で全角40文字以内、半角英語で80文字以内をキープするため320pxとします。
Metrics: 寸法
- Vertical Resizing: Hug
- Horizontal Resizing: 32px
- Container Height: Hug
- padding Vertical: 4px
- padding Horizontal: 8px
Usage: 使い方
Do
ツールチップは補足的な情報を伝えるために使用します。読み手が瞬時に理解できる短い文を提示する際に使用します。
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2025/04/04 | ドキュメントを公開 |
小さな気づきや違和感があれば、
フィードバック