• 作成:
  • 更新:

Semantic UIでツールチップを要素へのマウスホバーで表示するにはdata-tooltip属性を使う

Semantic UIには Popup | Semantic UIというものがありますが, これはマウスホバーでツールチップを出すための専用の要素を作る使いにくいものです.

ボタンなどに注釈としてツールチップを追加したいですよね. しかしHTMLネイティブのものは見辛いから使いたくない. せっかくSemantic UIを使っているのですから.

調べてみたらGitHubのissueが出てきました.

Tooltip on disabled button · Issue #4296 · Semantic-Org/Semantic-UI

これによるとdata-tooltip属性を追加することでツールチップを楽に要素に追加できるようです.

Reactの場合以下のようになります.

<div data-tooltip="foo" />

<Checkbox
  data-tooltip="このボタンはhogeの場合無効"
  disabled={this.props.foo}
  toggle
/>

できました.

要素がdisabledの場合使えない

disabledに設定したButtonなどはポインターイベントが発生しなくなるので, ツールチップも表示されなくなります.

Tooltip on disabled button · Issue #4296 · Semantic-Org/Semantic-UI

その場合仕方がないので少し面倒ですがPopupを使うしか無さそうですね.

と思ったらPopupもtriggerの内容がdisabledだとポインターイベント取らないようですね.

ちょっと検索したら

Popup won't open when inside disabled FormField · Issue #1413 · Semantic-Org/Semantic-UI-React

spanで対象要素を囲めば出てくるという情報を発見しました.

実際囲むと出てきます.

function component() {
  return (
    <Popup
      trigger={
        <span>
          <Checkbox label="foo" disabled={true} />
        </span>
      }
    />
  );
}