README
position
Positioning component. Use this to position elements in complex ways relative to other elements (e.g. tooltips).
Installation
$ npm install vdux-position
Usage
You can use Position to display things like tooltips that need to be positioned relative to some other element. E.g.
import Hover from 'vdux-hover'
import Position from 'vdux-position'
function Tooltip ({path, props, children}) {
const {placement, message} = props
return (
<span id={path}>
<Hover>
{children}
{
hover => hover && (
<Position placement={placement} near={path}>
<div class='tooltip'>{message}</div>
</Position>
)
}
</Hover>
</span>
)
}
API - props
placement
-top/left/bottom/right
. Where to put the element relative to thenear
element.near
- The string ID of the element you want to position<Postion/>
s child near. If unspecified, the nearest positioned element will be used.children
- You may only pass one child to position. Its child will be rendered around thenear
element.disable
- Disable the positioning (e.g. if the thing isn't shown yet).
License
MIT