lightning:helptext (ベータ)

lightning:helptext コンポーネントは、画面の要素を説明する少量のテキストを含むポップオーバーがあるアイコンを表示します。ポップオーバーは、関連付けられているアイコンにユーザがマウスポインタまたはフォーカスを置くと表示されます。このコンポーネントはツールチップと似ており、項目レベルのヘルプテキストを表示する場合などに役立ちます。ツールチップコンテンツでは、HTML マークアップはサポートされていません。

このコンポーネントは、Lightning Design System のツールチップからスタイル設定を継承します。

デフォルトでは、ツールチップは utility:info アイコンを使用します。Lightning Design System ユーティリティアイコンカテゴリでは、lightning:helptext で使用できる約 200 個のユーティリティアイコンを提供しています。Lightning Design System では複数のアイコンカテゴリが提供されていますが、lightning:buttonIcon で使用できるのはユーティリティカテゴリのみです。

ユーティリティアイコンを表示するには、https://lightningdesignsystem.com/icons/#utilityにアクセスしてください。

次の例では、ツールチップがあるアイコンを作成します。

1<aura:component>
2    <lightning:helptext
3        content="Your email address will be your login name" />
4</aura:component>

ポップオーバーはアイコンの左下に固定され、スペースがある場合はアイコンの上に表示されます。ビューポートに従ってその位置が自動的に調整されます。

属性