![見出し画像](https://assets.st-note.com/production/uploads/images/126201107/rectangle_large_type_2_9e231701bcc91d34a254a8308ad55213.png?width=800)
【マテリアルデザイン】Tooltips
Tooltips
ツールチップの目的は、ボタンやその他のUI要素にコンテキストを追加すること。
ツールチップには、プレーンタイプとリッチタイプの2種類が存在する。
プレーン:
アイコンボタンの要素や動作を説明する場合に使用。
アイコンのみのボタンやフィールドのように、テキストを持たないUI要素のラベル付けに最適です。
リッチ :
機能の価値を説明するなど、より詳細な情報を提供する場合に使用。
リッチツールチップには、オプションでタイトル、リンク、ボタンを含めることが可能。
![](https://assets.st-note.com/img/1704008614197-mg87pAktdx.png?width=800)
Tooltipの配置場所
プレーンの場合
プレーンツールチップは親要素の真上に配置されます。
ボタンのように視覚的な境界がある場合、距離は4dpです。
テキストのベースラインのように視覚的な境界がない場合、距離は8dpになります。
要素がTop App Barにある場合、ツールチップは同じ距離で要素の下に表示されます。
![](https://assets.st-note.com/img/1704008931197-A6rgoYvCGC.png?width=800)
リッチの場合
デフォルト
リッチツールチップは親要素の右下に配置されます。画面の外に出ないように位置を調整します。 ツールチップは親要素を覆ってはいけません。
動的な位置調整
ツールチップの位置は、画面外に出ないように8dp単位で調整されます。
デスクトップでの配置
デスクトップでは、ツールチップは親要素の下の中央に表示され、ターゲット領域内を移動中も表示されます。
![](https://assets.st-note.com/img/1704009052071-njfHb8xHAp.png)
配色、余白など
プレーンの場合
最小高さ:24dp
四角とテキスト間の余白:8dp
![](https://assets.st-note.com/img/1704009360135-gL9FBmBvq1.png)
リッチの場合
上部のパディング:12dp
下部のパディング:8dp
左右のパディング:16dp
![](https://assets.st-note.com/img/1704009423596-0saxy3YUVb.png?width=800)
この記事が気に入ったらサポートをしてみませんか?