Skip to main content

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.


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


Live Editor
ReferenceError: Provider is not defined