Beacon Tooltip

Component placing a beacon in the lesson, either independently or attached to a target. Upon hovering or clicking on the beacon, a tooltip is displayed.

Options

• title | (string|node): title to be displayed at the top of the tooltip. Default: none.
• content | (string|node): tooltip content. Default: 'content comes here...'.
• event | string: if set to click, tooltip is toggled when clicking on beacon; if set to hover, the tooltip is activated via hovering. Default: 'click'.
• placement | string: placement of the tooltip relative to target (either top, top-start, top-end, bottom, bottom-end, left, left-start, left-end, right, right-start, right-end, auto, or center). Default: 'left'.
• target | string: class or ID selector for element to attach tooltip to. Default: ''.
• offset | number: distance between the tooltip and target in pixels. Default: 15.
• onChange | function: callback invoked upon state change of the tooltip. Receives two arguments: the action (open or close) and the passed props. Default: onChange() {}.

Examples

Live Editor

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

Result

ReferenceError: Provider is not defined