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
/>

できました.

このエントリーをはてなブックマークに追加 fb-like g-plusone pocket