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() {}.

ライブエディター

<BeaconTooltip
    content="Body of the tooltip..."
    title="Title comes here..."
    event="hover"
    placement="right"
/>

<BeaconTooltip
    content="Body of the tooltip..."
    title="Title comes here..."
    event="hover"
    placement="right"
/>

結果

ReferenceError: Provider is not defined