Tooltip
Overview
Tooltip は要素にホバーしたりフォーカスしたりする時に、対象となる要素のラベルや短い説明を表示します。
Specification
Property
使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
| Name | Type | Default | Description | Remark |
|---|---|---|---|---|
| className | string | "" | コンポーネントの class 名 | |
| id | string | "" | コンポーネントの id 名 | |
| placement | string | "top" | 対象の要素に対するコンポーネントの表示位置 | 指定できるオプション: top, left, right, bottom |
| title | string | "" | コンポーネントに表示するテキスト | |
| container *1 | string/HTMLElement | "" | コンポーネントを表示する対象の要素 | 以下の時に title の値が表示される
|
| describeChild *2 | boolean | false | 要素に対して Tooltip が表す内容の設定 | Tooltip がラベルを表す場合は false、追加情報や補足説明を表す場合は true を設定する |
備考
*1: できるだけフォーカス可能な要素を使用し、アクセシビリティのためにフォーカス不可能な要素の利用は控えてください。
*2: 以下、describeChild プロパティの使い方を理解することで、アプリケーションのアクセシビリティとユーザビリティを効果的に向上させることができます。
- Tooltip が要素自体の目的を表す（要素のラベルを提供する）場合は、describeChild を false に設定します。
- Tooltip コンポーネントの最初の子要素に、title プロパティの値が設定された aria-label 属性が追加されます。
- 例えば、保存アイコンがあり、Tooltip がそのアイコンのラベルを提供するケースで す。
<kuc-tooltip>
<button aria-label='Save'>
<span class='icon-save'></span>
</button>
<div id='tooltip-ID'>Save</div>
</kuc-tooltip> - 詳細については aria-label を参照してください。
- Tooltip が要素の説明を表す（要素についての追加情報や補足説明を提供する）場合は、describeChild を true に設定します。
- Tooltip コンポーネントの最初の子要素に、Tooltip のラッパー要素の ID の値が設定された aria-describedby 属性が追加されます。
- 例えば、質問アイコンがあり、Tooltip がそのアイコンの説明や解説を提供するケースです。
<kuc-tooltip>
<button aria-describedby='tooltip-ID'>
<span class='icon-question-mark'></span>
</button>
<div id='tooltip-ID'>This is a help icon. Click for more information</div>
</kuc-tooltip> - 詳細については aria-describedby を参照してください。
Constructor
Tooltip(options)
使用できるコンストラクタの一覧です。
Parameter
| Name | Type | Default | Description | Remark |
|---|---|---|---|---|
| options | object | {} | コンポーネントのプロパティを含むオブジェクト |
Custom CSS
ヒント
Custom CSS をご確認ください。
コンポーネントのスタイルを変更するために使用で きるプロパティの一覧です。
Property
| Name |
|---|
| --kuc-tooltip-background-color |
| --kuc-tooltip-color |
| --kuc-tooltip-font-size |
| --kuc-tooltip-height |
| --kuc-tooltip-width |
Sample Code
ヒント
導入と実装方法 をご確認ください。
全てのパラメータを指定した場合のサンプルコードです。
const Kuc = Kucs['1.x.x'];
const space = kintone.app.record.getSpaceElement('space');
const buttonEl = document.createElement('button');
buttonEl.innerText ='Add';
const tooltip = new Kuc.Tooltip({
title: 'Do not add if it exists.',
container: buttonEl,
placement: 'bottom',
describeChild: true,
className: 'tooltip-class',
id: 'tooltip-id',
});
space.appendChild(tooltip);