react-tooltip-wrapper-components v0.0.6

General description

The pop-up window component displays the attached content relative to the parent element with the specified parameters

Install dependencies

npm install react-tooltip-wrapper-components

OPTIONS

onClose?: {Function} event to close the window

action?: (String) condition for the appearance of 'toggle', 'move', 'show', 'open'

state?: (Boolean) show / hide control from the outside, the action parameter is ignored

target?: (String) id-element about which to show the portal in the parent element

displacement?: (Number) Forced offset. If offset 'top', 'bottom' is on the x axis, otherwise on the y axis. It is advisable not to use.

runaway?: (Boolean) if true then the block is hidden when hovering over it (for action: 'move', used in tooltips)

outside: (Boolean) if true then the block is hidden when clicked outside

scrollHide?: (string) hiding when scrolling, takes a string for document.querySelectorAll (), and if an object is found then it is hiding on the scroll

layout?: (Object) positioning relative to the parent has the following structure:

layout?: { // default top / auto
position: (String) ['top', 'right', 'bottom', 'left'] (required) - which side
offset: (String) ['top', 'right', 'bottom', 'left', 'center', 'auto'] (required) - offset relative to the arrow
    (auto - in the center but does not call outside the screen)
}

auto: (Boolean) if true, then the position is selected based on the available space on the screen, even if layout is specified

positions?: (Object) Fixes the location of the elements with care, layout and auto are ignored!

positions?: {
  content: {
right: '30px',
top: '60px'
  },
  corner: {
right: '191px',
top: '-5px'
  }
}

style?: (Object) The style object has the following structure:

style: {
base: (String), // style of the general block
corner: (String), // style of the arrow (the arrow is an inverted square, the size is set by increasing the width and height)
content: (String) // block style for content
}

className: (String) styles for the entire structure, usually not used

children?: (Element) the contents of TooltipWrapperComponents`a must necessarily be wrapped in a container

TooltipWrapperComponents proksids in the child props method closeRTW with which you can close the block from the inside (shown in the example)

TooltipWrapperComponents also contains DefaultSettings to simplify styling, ideally to work only through them (shown in the example)