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 の値が表示される container 要素がホバーされた時 container 要素がフォーカスされた時
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);