メインコンテンツまでスキップ
バージョン: 1.17.0

Tooltip

Overview​

Tooltip は要素にホバーしたりフォーカスしたりする時に、対象となる要素のラベルや短い説明を表示します。

Specification​

Property​

使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。

NameTypeDefaultDescriptionRemark
classNamestring""コンポーネントの class 名
idstring""コンポーネントの id 名
placementstring"top"対象の要素に対するコンポーネントの表示位置指定できるオプション: top, left, right, bottom
titlestring""コンポーネントに表示するテキスト
container *1string/HTMLElement""コンポーネントを表示する対象の要素以下の時に title の値が表示される
  • container 要素がホバーされた時
  • container 要素がフォーカスされた時
describeChild *2booleanfalse要素に対して 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​

NameTypeDefaultDescriptionRemark
optionsobject{}コンポーネントのプロパティを含むオブジェクト

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);
に最終更新