Incorrect position and zIndex of supplied DOM element

[scottwillman]

React / NPM install tether-drop / v1.4.1

I really want this to work but am finding difficulty getting it to do what's advertised. When supplying a DOM element, the content seems to be centered over the target instead of pinned to the edge (as would be expected). I also can't seem to override the z-index to put it over the rest of the page (it's going behind my bootstrap nav which is at 1000).

componentDidMount() {
    var drop;
    drop = new Drop({
        target: ReactDOM.findDOMNode(this.refs.signUpTarget),
        content: ReactDOM.findDOMNode(this.refs.signUpContainer),
        position: 'bottom center',
        openOn: 'click',
    });
}

The base target:

What I would expect:

What I get:

Here is the full render function:

    render() {
        const style = {
         backgroundColor: '#EEE',
         boxShadow: '0 5px 10px rgba(0, 0, 0, 0.2)',
         border: '1px solid #CCC',
         padding: 10,
         width: 300,
        };

        return(
        <span>
            <a href="#" ref="signUpTarget">sign up</a>

            <div ref="signUpContainer" style={style}>
                <form>
                    <FormGroup controlId="formControlsEmail">
                        <FormControl type="text" placeholder="Email address" />
                    </FormGroup>
                    <FormGroup controlId="formControlsPassword">
                        <FormControl type="password" placeholder="Password"/>
                    </FormGroup>
                    <FormGroup controlId="formControlsPassword2">
                        <FormControl type="password" placeholder="Re-type Password" />
                    </FormGroup>
                    <FormGroup>
                        <Radio inline name="gender">Female</Radio>
                        <Radio inline name="gender">Male</Radio>
                    </FormGroup>
                    <FormGroup controlId="formControlsSubmit">
                        <Button bsStyle="success" type="submit">Sign Up</Button>
                        <Button bsStyle="link" type="button">Cancel</Button>
                    </FormGroup>
                </form>
                <a href="#" onClick={ this.hide.bind(this)}>Cancel</a>
            </div>
        </span>
    );
}