React-poppy NPM

#React-Poppy

React popover that scales, follows, scrolls, and grows

##Usage

npm install react-poppy

clone/download and use appropriate script in /dist

##Demos

reposition on scroll events
interactions (hover to show, mouse over to keep popover open, toggle to open, grow based on content, scroll content)
repositions on state change
can track elements (same as above demo except follows elements not modified by react state)

##Psuedo JSX

<Poppy content="World" title="Hello" constrainTo="body" toggleOnClick>
    <button style={{margin:20,padding:10,height:50}}>HOVER ME</button>
</Poppy>

###Properties

children=ReactElement - the target element that the popover should follow and position around
constrainTo=element,ReactElement,querySelector='parent' - used to calculate the bounding area that the popover should be contained in. If using a string, the querySelector is matched upward from the popover's location in the DOM tree. Parent is a special selector that will use the React element containing the popover.
show=boolean=undefined - forces the popover to show. Show takes precedence over all other types of show/hide interactions.
showDelay=number=300 - amount of time that needs to pass before the popover begins to show.
hideDelay=number=320 - amount of time that needs to pass before the popover begins to hide.
track=boolean=false - enables an internal timer to track the target element's position and size
constrainHeight=boolean=true - limits the height to the constrainTo's available space
constrainWidth=boolean=true - limits the width to the constrainTo's available space
arrowSize=number=15 - changes the size of the arrow
region="left"|"right|"top|"bottom"|undefined - forces popover placement in a particular region
bindScroll=boolean=false|querySelector - binds the popover to the window scroll event if "true" or an element matching the querySelector traversing upwards from the popover target.
bindWindowResize=boolean=false - binds the popover to the window resize event
arrowStyle=object={} - arrowStyle override
backgroundStyle=object=undefined - backgroundStyle override
wrapperStyle=object=undefined - wrapperStyle verride
titleStyle=object=undefined - titleStyle override
className=string='' - className to apply to popover
title=string=''|ReactElement - title to be used.
showOnMouseEnter=boolean=true - popover will show when mouse enters target element
hideOnMouseLeave=boolean=true - popover will hide when mouse leaves target element.
toggleOnClick=boolean=false - popover will toggle show/hide when target element is clicked.
persistOverContent=boolean=false - popover will stay visible while the mouse is over the popover
onHide=function - event called when the popover is hidden
onShow=function - event called when the popover is shown