component-highlighter

Enable highlighting

override versions for specific components. As versions change rapidly consumers may want to specify them locally.

list ids to ignore

Identify components using a border and tooltip. The floating elements are positioned using Popper.js, with some custom code.

To select an element in the page, we listen to ‘mouseOver’ event for any user interaction with a child element, and then look for the first parent that has the html attribute "data-bit-id". Components with the ‘data-ignore-component-highlight’ attribute are completely ignored, to avoid changing target when interacting with the highlighter itself.

dom element to attach to

options for the underlying Popper.js position engine

A Popper.js react wrapper that repositions children to be adjacent to a target element.
This component is a container only, with no visual styling.