メインコンテンツへスキップ

Beacon Tooltip

レッスン内にビーコンを配置するコンポーネントで、独立して、または target に添付して配置します。ビーコンの上にカーソルを置いたりクリックしたりすると、ツールチップが表示されます。

オプション

  • title | (string|node): ツールチップの上部に表示されるタイトル. Default: none.
  • content | (string|node): ツールチップコンテンツ. Default: 'content comes here...'.
  • event | string: clickに設定されている場合は、ビーコンをクリックしたときにツールチップがトグルされ、hoverに設定されている場合は、ホバーしたときにツールチップが有効になります。. Default: 'click'`.
  • placement | string: ツールチップを target (top, top-start, top-end, bottom, bottom-end, left, left-start, left-end, right, right-start, right-end, auto, center のいずれか) に対して相対的に配置します。. Default: 'left'.
  • target | string: ツールチップを添付する要素のクラスまたはIDセレクタ. Default: ''.
  • offset | number: ツールチップと target の距離をピクセル単位で指定します。. Default: 15.
  • onChange | function: コールバックはツールチップの状態が変化したときに呼び出されます。2つの引数を受け取ります: action (open または close) と渡された props です。. Default: onChange() {}.

例としては、以下のようなものがあります。

ライブエディター
結果
ReferenceError: Provider is not defined